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

カテゴリ:CSSテクニック 2008年2月15日 11:33

RedLine MagazineさんのCSS3 :target擬似クラスでイメージギャラリーを見て、ふと思いついたのでサンプルを作ってみた。n

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

内容は、:target 擬似クラスを使った、windows のメニューバーのようにクリックしたらメニューが現れるタイプのメニュー。
それを、JavaScript なしで CSS のみでやってしまおう、というのが今回の主旨。n

▼EntryMore▼

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

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

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

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

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

CSS ソース

この記事のカテゴリー一覧を見る⇒CSSテクニック

  • このエントリーをはてなブックマークに追加

トラックバックURL

http://css-eblog.com/cgi-bin/mt/mt-tb.cgi/62