アニメーションをはじめ、角丸、ドロップシャドウ、不透明度などCSS3での新機能を盛り込んだドロップダウン型のナビゲーションをCSSplayから紹介します。
CSS3 – The future now – animated menus
デモページ
デモページはCSS3を使用しているため、Safari, Chromeで動作します。上記キャプチャはChromeです。
ふわりとスライドするドロップダウンは一見jQueryなどのスクリプトかと思ってしまいますが、これがCSS3のアニメーション機能です。
また、スライドのアニメーションだけでなく、フェードするタイプのナビゲーションも公開されています。
ナビゲーションはリスト要素で実装されており、アニメーションでスライド表示するパネルはdiv要素となっています。
Post on:2010年1月26日
