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

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

デモのキャプチャ

CSS3 - The future now - animated menus
デモページ

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

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

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

デモのキャプチャ

CSS3 - The future now - menus

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

top of page

©2017 coliss