jQueryでプルダウンメニュー（たった5行で！）

プルダウンメニューは色々なプラグインが出尽くしているかと思うので、プラグインを使わない且つ5行で実装できるプルダウンメニューのサンプルを作成しました…と言ってもhtmlの構造やCSSの力を大部借りますが。

jQueryでプルダウンメニュー

■html

<body>
<ul id="menu">
<li>メニュー1
<ul>
<li><a href="#">サブメニュー1-1</a></li>
<li><a href="#">サブメニュー1-2</a></li>
<li><a href="#">サブメニュー1-3</a></li>
</ul>
</li>
<li>メニュー2
<ul>
<li><a href="#">サブメニュー2-1</a></li>
<li><a href="#">サブメニュー2-2</a></li>
<li><a href="#">サブメニュー2-3</a></li>
</ul>
</li>
</ul>
</body>

■css

#menu li {
  position: relative;
  float: left;
  margin: 0;
  padding: 5px;
  width: 200px;
  height: 20px;
  border: solid 1px #ccc;
  font-weight: bold;
}
#menu li:hover {
  color: #fff;
  background: #333;
}
#menu li ul {
  display: none;
  position: absolute;
  top: 30px;
  left: -1px;
  padding: 5px;
  width: 200px;
  background: #eee;
  border: solid 1px #ccc;
}
#menu li ul li {
  margin: 0;
  padding: 0;
  width: 200px;
  border: none;
}
#menu li ul li a {
  display: inline-block;
  width: 200px;
  height: 20px;
}
#menu li ul li a:hover {
  background: #999;
  color: #fff;
}

■javascript

$("#menu li").hover(function() {
	$(this).children('ul').show();
}, function() {
	$(this).children('ul').hide();
});

解説

今回の一番のポイントはjQueryではありません。以下のようにli要素の中にul要素を入れ子にすることです。

<li>メニュー1
<ul>
<li><a href="#">サブメニュー1-1</a></li>
<li><a href="#">サブメニュー1-2</a></li>
<li><a href="#">サブメニュー1-3</a></li>
</ul>
</li>

上記のように入れ子にすることでjavascript側が簡単になります。
理由は後で説明するとして、jQueryの説明に進みます。
今回はhoverイベントを使います。
hoverはとても便利で、mouseoverとmouseout時の処理を同時に設定できます。
まずmouseover時の処理は以下です。

$("#menu li").hover(function() {
	$(this).children('ul').show();
}

メニューにカーソルが当たったら子要素のulを表示すると書いてあります。
次にmouseouｔ時は、

function() {
	$(this).children('ul').hide();
});

メニューからカーソルがはずれたら子要素のulを非表示にします。
とてもシンプルです。
これは上記で説明したli要素の中にul要素を入れ子にしたおかげです。
ul要素が入れ子になってない場合、メニューのli要素をmouseoverして表示させたプルダウンメニューにカーソルを遷移した瞬間にプルダウンメニューは非表示になってしまいます。なぜならプルダウンメニューに移動した瞬間にメニューのli要素をmouseoutしてしまうからです。

しかし以下のように入れ子になっているおかげでメニューからプルダウンメニューにカーソルを移動してもli要素をmouseoutしないようになっています。

ちなみにCSSは基本好きに設定して頂ければよいかと思いますが、ただ1点注意点をあげると入れ子にしているul要素はdisplay: none;で非表示にして下さい（当然ですね）。

#menu li ul {
  display: none;
  position: absolute;
  top: 30px;
  left: -1px;
  padding: 5px;
  width: 200px;
  background: #eee;
  border: solid 1px #ccc;
}

2011年8月10日 jQueryでlightbox風の画像表示を自作する (0)
2010年11月15日使い回しのきくソーシャルブックマークボタン (0)
2012年9月7日タブの切替 | よく使うjQuery（画像編） (10)
2011年5月19日 jQueryでApple風インフォメーション (0)
2010年11月17日タブの切替 | よく使うjQuery (55)