CSS: MultiLevel Menu
Webサイトにおいて、各ページの上部あるいは左部にサイト内で共通したナビゲーションメニューを設置し、そこに各ページへのリンクを記述する構成は、 非常に一般的に使われるレイアウトとなっています。 また、コンテンツが増加するに従い、それらの少数のリンクではまかない切れなくなりますので、 そこにさらに各詳細ページへのリンクを記述したサブメニューを設置する事もあります。 (TabSet 多階層メニューのサンプル)
このような実装でも、JavaScriptを利用しているケースが多いですが、 JavaScriptが利用出来ない環境でサブメニューのリンクが表示されないのでは、利用者の利便性を損なう事にもなります。 上記のサンプルでは特にその点を考慮していませんでしたが、ここではJavaScriptやCSSが有効では無い環境でも表示されるような記述を行います。
li:hoverなど、aタグ以外のエレメントにも擬似クラスが利用出来るブラウザでは、
JavaScriptを用いる事無く、このようなある程度シンプルな記述で、動的にサブメニューの表示切替が行われる多階層メニューを実現出来ます。
また、テキストブラウザであるLynxでも階層を保ったままリンクが表示されるような、非CSS環境においても有効な記述となっています。
:hoverなどの擬似クラスは、その子エレメントまで適用されますので、サブメニューはその上の階層メニューの子エレメントとして記述します。
動的な効果を与える擬似クラスを、任意のエレメントに指定出来るというCSS2.1仕様を取り入れたブラウザ、あるいはCSSをサポートしていない環境ならばリンクは表示されるのですが、 2007年09月現在で最も利用者の多いPCブラウザだと思われる(擬似クラスはaタグにしか適用出来ない)IE6.0ではサブメニューが表示されないという大きな問題点があります。 よって利用者の環境が不特定の場合には、やはりJavaScriptと併用するというのが最も確実な実装になるかと思われます。