:target擬似クラスを使ったプルダウンメニュー

▼EntryMore▼

ただ、問題がいくつかあって、:target擬似クラスに対応していないブラウザではまったく動作しないこと。
そのために、結局Javascriptを併用しないといけないんだけど、IE8の話があったりと、今後はCSS3の実装が進んでいくと思われるので、:target擬似クラスがほぼすべてのブラウザで使用可能になれば、いずれは使えるかなと思ってエントリー。

大まかに概要を話すと、クリックしたときに出てくるメニュー部分は隠しておき、そのメニューの要素にIDを設定し、そのIDをtargetとしてtarget付きリンク（#menuみたいなやつ）をクリックした際に、そのメニューがアクティブになって表示される、というもの。

ただ、普通にメニューを表示してしまうと、そのメニューを隠すには他のリンクをクリックしないといけなくなってしまう。
windowsのように、画面のどっかをクリックしてメニューを消す、ということができないので、かわりにtarget付きリンクを設定している要素にかぶせるように、まったく同じ名前のリンクを上からかぶし、その部分にはなにもtargetしていないリンクにしておくことで、同じ場所をクリックするとメニューが隠れる、という仕組み。

サンプルを見てもらうとわかるけど、「▼」のようなものを使って、そこをクリックすると開閉しますよ、ってことを明示しておくと分かりやすいと思う。

これを作ってて、ちょっとメニュー以外にも使えそうだな、と思ったので次回のエントリーはそれを書こうと思います。

▼CSSソース
#menu > li { background: url(images/off.gif) left top no-repeat; float: left; position: relative; width: 105px; height: 23px; } #menu li a { color: #fff; font-size: 10px; display: block; text-decoration: none; text-align: center; line-height: 23px; padding-right: 20px; } #menu01 { background: url(images/on.gif) left top no-repeat; display: none; position: absolute; top: 0; left: 0; width: 105px; height: 92px; } #menu01 li a { color: #fff; font-size: 10px; display: block; text-decoration: none; text-align: center; line-height: 23px; padding: 0; width: 81px; } #menu01 li a:hover { background: #f73; } #menu01 li:first-child a { padding-right: 20px; width: 85px; } #menu01 li:first-child a:hover { background: none; } #menu01:target { display: block; }