jQuery: ドロップダウンメニューの作り方
jQueryでドロップダウンメニューを作ります。
横並びに表示されているメニューにマウスカーソルをのせると、サブメニューが表示されます。
動作サンプル、サンプルコード、コード解説の順番で記述しています。
動作サンプル
html
<ul id="menu">
<li><a href="#">menu A</a>
<ul class="sub">
<li><a href="#">menu A-1</a></li>
<li><a href="#">menu A-2</a></li>
</ul>
</li>
<li><a href="#">menu B</a>
<ul class="sub">
<li><a href="#">menu B-1</a></li>
<li><a href="#">menu B-2</a></li>
</ul>
</li>
<li><a href="#">menu C</a>
<ul class="sub">
<li><a href="#">menu C-1</a></li>
<li><a href="#">menu C-2</a></li>
<li><a href="#">menu C-3</a></li>
</ul>
</li>
</ul>
CSS
/* リスト全般 */
li{
list-style-type: none;
}
li a {
color: white;
padding: 5px 10px;
display: block;
text-decoration: none;
}
/* メインメニュー */
ul#menu li{
float: left;
position: relative;
width: 160px;
background-color: darkred;;
display: block;
}
/* サブメニュ- */
ul.sub{
display: none;
position: absolute;
padding-left: 0px;
}
ul.sub li a:hover{
background: red;
}
JavaScript
$(document).ready(function(){
$('#menu li').hover(function(){
// アニメーションの多重実行防止
$('ul:not(:animated)', this).slideDown('fast');
}, function(){
$('ul.sub', this).slideUp('fast');
});
});
コード解説
メニュー項目を配置する
ul要素を使って、下図のようにメニュー項目を配置します。

<li><a href="#">menu A</a>
<ul class="sub">
<li><a href="#">menu A-1</a></li>
<li><a href="#">menu A-2</a></li>
</ul>
</li>
li要素の中にサブメニュー用のul要素を記述するのがポイントです。
アニメーションの多重実行防止
// アニメーションの多重実行防止
$('ul:not(:animated)', this).slideDown('fast');
slideDown()メソッドが多重に実行されるのを防止するために、:not(:animated)
を記述しています。
thisの子要素を取得する
thisの子要素を取得する方法は複数あります。 例えばthisの子要素pを取得する場合、次のような方法があります。
$('p', this)
$(this).children('p')
$(this).find('p')
上記3つの方法を今回のコードにあてはめると次のようになります。
$('ul:not(:animated)', this).slideDown('fast');
$(this).children('ul:not(:animated)').slideDown('fast');
$(this).find('ul:not(:animated)').slideDown('fast');
どの方法でも同じ結果が得られますので、好きな方法で記述してください。