【JQuery】コピペでできるドロップダウンメニュー【サンプル】

こんにちは。

今回はJQueryを使って簡単にコピペで出来るドロップダウンメニューをご紹介いたします。

ナビゲーションをHTMLで作成する
CSSでスタイルを設定
Jqueryをhtmlへ設定する
JQueryでイベントを設定する

ナビゲーションをHTMLで作成する

メニューをul要素で作成しています。
各li要素内に子要素のナビゲーションを設定しています。

<nav>
    <ul id="global_nav">
        <li class="#"><a href="#">メニュー１</a>
            <ul>
                <li><a href="#">メニュー１ａ</a></li>
                <li><a href="#">メニュー１ｂ</a></li>
                <li><a href="#">メニュー１ｃ</a></li>
            </ul>
        </li>
        <li class="#"><a href="#">メニュー２</a>
            <ul>
                <li><a href="#">メニュー２ａ</a></li>
                <li><a href="#">メニュー２ｂ</a></li>
                <li><a href="#">メニュー２ｃ</a></li>
                <li><a href="#">メニュー２ｄ</a></li>
            </ul>
        </li>
        <li class="#"><a href="#">メニュー３</a>
            <ul>
                <li><a href="#">メニュー３ａ</a></li>
                <li><a href="#">メニュー３ｂ</a></li>
            </ul>
        </li>
        <li class="#"><a href="#">メニュー４</a>
            <ul>
                <li><a href="#">メニュー４ａ</a></li>
                <li><a href="#">メニュー４ｂ</a></li>
            </ul>
        </li>
        <li class="#"><a href="#">メニュー５</a>
            <ul>
                <li><a href="#">メニュー５ａ</a></li>
                <li><a href="#">メニュー５ｂ</a></li>
                <li><a href="#">メニュー５ｃ</a></li>
            </ul>
        </li>
    </ul>
</nav>

CSSでスタイルを設定

子要素のメニューはマウスホバーで表示させるため、#global_nav ulのスタイルをdisplay:noneに設定しておきます。もしご自身でスタイルを色々変更される場合はdisplay:noneの設定は最後に行ってください。

/* ナビゲーションのスタイル */
a{
    text-decoration: none;
    color: #666;
}

#global_nav li{
    float: left;
    width: calc(98.5%/5);
    margin: 1% 0.15%;
}
#global_nav li a{
    display: block;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: #FFF1DA;
}

#global_nav li a:hover{
    color: #fff;
    background: #FCD69E;
}

/* 子要素のみのスタイル */
#global_nav ul{
    display: none;
}

#global_nav ul li{
    float: none;
    width: 100%;
    margin: 1% 0;
}

Jqueryをhtmlへ設定する

Jqueryの設定を行います。
</body>の直前にこのコードを入れます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="js/style.js"></script>

JQueryでイベントを設定する

JQueryでマウスホバー時に表示を切り替える動作を追加します。
まず、ul li liにはイベントを起こさないようにchildrenメソッドで#global_navの子要素のみにhoverメソッドを設定します。
次に、this(ホバーされている#global_nav li)の子要素 ulに対し、slideToggleメソッドで要素をスライドしながら開閉します。
※ stop()メソッドはイベントの重複を防ぐため、イベントを中止するために設定しています。

$(function () {
    // 1.#global_nav liにhoverメソッドを設定
    $("#global_nav").children("li").hover(function(){
        // 2.メニューの開閉
        $(this).children("ul").stop().slideToggle(180);
    });
});

実際にマウスホバーした時にこのように子要素のナビゲーションが表示されたら完成です。簡単にできますので、試してみてください。