[CSS]CSS3の機能をふんだんに使用した実用的なナビゲーション

アニメーション、RGBa、角丸などCSS3の機能をふんだんに使用しつつ、非対応ブラウザでも最低限の情報を提供しているナビゲーションを実装するチュートリアルを紹介します。

Creating a pure CSS dropdown menu

ナビゲーションはJavaScriptを使用せずCSSで実装されており、CSS3をサポートするChrome, Safariですべてのエフェクトを楽しむことができます。

デモページ

一番上のキャプチャはサイトで実際に使用されているものです。
Venturelab

CSS3非対応ブラウザの場合は、下記のようになります。

IE7での表示

チュートリアルではスタイルシートに対応した細かい解説がされており、スタイルシートを見るだけでも随所にアイデアが詰まっています。