階層式のメニューは直感的に操作でき、どこに何があるか明確なため、ユーザーにとっても分かりやすくユーザビリティに優れたメニューだと思います。今回紹介する「Cross browser flyout menu」はシンプルでクールなCSS階層メニューのサンプルを公開しています。

上記は公開されているメニューの一つで画像を使用したタイプの階層メニューです。「CSS only fly-out menus」の下部からCSSのサンプルと使用画像をダウンロードできるようになっています。

更にもう一つのメニュー

画像は野暮ったくて使いたくないと言う方はソースを直すのもいいのですが、画像を使わない下記のようなシンプル版が合わせて公開されています。

こちらも同様にサイト下部からCSSのソースをダウンロード可能です。

どちらも汎用性が高くてそのままでも色々なサイトに使えそうです。CSSなのでカスタマイズも容易な点も嬉しい所です。ちなみにIE5.5 , IE6, IE7, Firefox, Opera 等で動作可能となっています。

Stu Nicholls | CSSplay | Cross browser flyout menu examples using only css

Related Articles:

• 指定したFontから画像を作るWEBサービス「Font Image Generator」
• CSSベースのクールなリストが簡単に作れる「List-O-Matic」
• フロートウィンドウを生成するjavascript「Mocha」
• 画像をアスキーアートに変換してくれる「ASCII Art Generator」
• 表示中のWEBページに使われている色をまとめてカラーパレット化できるFireFox拡張機能
• WEB2.0っぽい光沢+カラフルなタブメニュー「Pure Css Horiontal Menus」
• YouTubeの貼付タグをXHTML 1.0に最適化するGreasemonkeyスクリプト