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