CSSによるポップアップメニュー

カテゴリ:CSSテクニック 2006年6月23日 23:30

この後のエントリーで CSSのみでプルダウンメニューを作る を書き足しました。こちらではJavascriptを使わずにIE6を含めたすべてのブラウザでプルダウンメニュー(ポップアップメニュー)を実現しています。

Flash や JavaScript で実現されるポップアップメニューを CSS で実現するやり方を考えてみたり。
結局、IE にあわせると JavaScript を介さないといけなくなるんですが、いちおう Firefox でならば JavaScript を使わないで実現することはできました

CSSのみでプルダウンメニューデモ

簡単に解説すると、ひとつのボックス要素の中にポイントするとポップアップする部分のメニューを書きます。
それのボックス要素内にdisplay:noneをもつ要素(これがポップアップで出る部分)を書き、通常時には隠れるようにしておく。
そして最初に書いたメニュー部分(サンプルでは li 要素)に:hover擬似属性を設定する。(li:hover←これが IE だと使えないんですよねー)n

のように、:hover時にのみ block 要素になるように設定を追加します。
そうすることで、:hover時だけ姿を現す、まさにポップアップメニューになります。
とりあえず、今回は IE にも対応させようってことで JavaScript の onmouseover で上のli:hover divの部分の代用をしてます。n

IE7 で :hover が使えるようになるといいなぁ・・。n

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

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

トラックバックURL

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