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

2006年6月23日 23:30

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

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

▼サンプルはこちら
CSSのみでプルダウンメニューのサンプル
http://www.green.dti.ne.jp/edo/web-test/test6/←サーバ移転のため削除されました。

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

li:hover div{ display: block; }

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

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

▼EntryMore▼

トラックバックURL

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

コメントを投稿





承認されるまでコメントは表示されません。しばらくお待まちください。