【CSS】プルダウンメニュー(ドロップダウンメニュー)をつくろう

 

最近なぜだか鼻炎がひどいyukaringです。こんにちは。
くしゃみがうるさくてごめんなさい...。

今回はプルダウンメニュー(ドロップダウンメニュー)をCSSでつくります。
CSSオンリーだとIE6は非対応になってしまうのですが、
jsでごにょごにょすると簡単にIE6にも対応できます!
【HTML】
シンプルなリストです。
プルダウン表示させたいulを入れ子にします。

【CSS】 ※リストに関わる部分のコードのみ
body {
padding: 30px;
font-size: small;}
ul li {width: 200px;}
ul.menu > li {
position: relative;
margin: 0 0 0 -1px;
float: left;
border: 1px solid #999;}
ul.menu li > a {
display: block;
padding: 5px;}
ul.menu li ul {
position: absolute;
left: -1px;
visibility: hidden;
width: 200px;
background: #fff;
border: 1px solid #ccc;}
ul.menu li:hover > a {
background: #00c;
color: #fff;}
ul.menu li:hover ul {visibility: visible;}
ul.menu li ul li:hover > a {background: #99CCFF;}
プルダウン部分(ul.menu li ul)をvisibility: hidden;で非表示にしておき、リストにマウスが乗ると(ul.menu li:hover ul)、プルダウン部分がvisibility: visible;になり、表示されるという仕組みです。

【CSS】プルダウンメニュー(ドロップダウンメニュー)をつくろうのデモ(IE6未対応)

これだけで簡単にプルダウンメニューが実装できます!
もちろん背景に画像を使用したりして、アレンジすることも可能です。

ただし、IE6はa要素以外に擬似クラス(:hover)が使えないため、動作しません。
そこで登場するのがIE7.jsです。

ie7-js

IE6をIE7と同じ動きにしてしまおう!というjsです。
読み込み方は非常に簡単で、<head>内に

と記述するだけ。
IE6でも擬似クラスが使えるようになるので、同じCSSを使用してプルダウンメニューを作ることができます。
※js読み込みに若干時間がかかるため、IE6に対応していないCSSの描画が遅いです。
なので、実際に使用するときは、必要な部分以外は手間でもIE6に対応した書き方をした方がいいと思います。
下記デモでは:hoverに関する動き以外は通常のIE6に対応した書き方にしています。


【CSS】プルダウンメニュー(ドロップダウンメニュー)をつくろうのデモ(IE6対応 - IE7.js使用)

特殊なエフェクトの無いシンプルなものであれば、プルダウンメニューはCSSだけでできちゃうんです!(IE6はごまかしでw)
コードもキレイなので、オススメです。