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')

上記３つの方法を今回のコードにあてはめると次のようになります。


$('ul:not(:animated)', this).slideDown('fast');

$(this).children('ul:not(:animated)').slideDown('fast');

$(this).find('ul:not(:animated)').slideDown('fast');

どの方法でも同じ結果が得られますので、好きな方法で記述してください。

jQuery入門