[CSS]CSS3の新機能を盛り込んだナビゲーション集

Post on:2010年1月26日

sponsors

アニメーションをはじめ、角丸、ドロップシャドウ、不透明度などCSS3での新機能を盛り込んだドロップダウン型のナビゲーションをCSSplayから紹介します。

デモページはCSS3を使用しているため、Safari, Chromeで動作します。上記キャプチャはChromeです。

ふわりとスライドするドロップダウンは一見jQueryなどのスクリプトかと思ってしまいますが、これがCSS3のアニメーション機能です。

また、スライドのアニメーションだけでなく、フェードするタイプのナビゲーションも公開されています。

ナビゲーションはリスト要素で実装されており、アニメーションでスライド表示するパネルはdiv要素となっています。