階層式のメニューは直感的に操作でき、どこに何があるか明確なため、ユーザーにとっても分かりやすくユーザビリティに優れたメニューだと思います。今回紹介する「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