jQueryで簡単ドロップダウンメニュー

今回はjQueryを使ってコピペで作成できる

ドロップダウンメニューをご紹介します。

今回作成するドロップダウンメニューのデモがこちら

DEMO

早速作成していきましょう！

jQueryを読み込ませる。

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

これをHTMLのbodyの閉じタグの前に入れましょう。

HTMLで形を作る。

<ul class="dropdwn">
        <li>HOME</li>
        <li>A
            <ul class="dropdwn_menu">
                <li><a href="#">A1</a></li>
                <li><a href="#">A2</a></li>
            </ul>
        </li>
        <li>B
            <ul class="dropdwn_menu">
                <li><a href="#">B1</a></li>
                <li><a href="#">B2</a></li>
                <li><a href="#">B3</a></li>
            </ul>
        </li>
        <li>C
            <ul class="dropdwn_menu">
                <li><a href="#">C1</a></li>
                <li><a href="#">C2</a></li>
                <li><a href="#">C3</a></li>
                <li><a href="#">C4</a></li>
            </ul>
        </li>
        <li>D
            <ul class="dropdwn_menu">
                <li><a href="#">D1</a></li>
                <li><a href="#">D2</a></li>
                <li><a href="#">D3</a></li>
                <li><a href="#">D4</a></li>
                <li><a href="#">D5</a></li>
            </ul>
        </li>
    </ul>

Point!
　ul.dropdwn_menuの中のliがドロップダウンで表示されるメニューです。

CSSで形を整える。

.dropdwn{
    max-width: 1200px;
    display: flex;
}

ul{
    text-align: center;
    list-style-type: none;
    margin: 0 auto;
    padding: 0;
    color: #fff;
}
li{
    max-width: calc(1200px/5);
    position: relative;
    padding: 5px;
    display: block;
    cursor: pointer;
}

.dropdwn>li{
    width: 1200px;
    margin: 1px;
    background: #7ba5ff;
    display: inline;
}

.dropdwn_menu{
    width: 100%;
    display: none;
    position: absolute;
    margin-left: -5px;
    margin-top: 5px;
    padding: 0;
    background: rgb(75, 100, 209);
}

.dropdwn_menu li{
    width: 100%;
}

.dropdwn_menu li a{
    padding: 5px 0;
    margin: -5px 5px -5px -5px;
    display: block;
    color: #fff;
}

li a:hover{
    background: #b3d7ff;
    color: rgb(65, 65, 65);
}

Point!
　ul.dropdwn_menuをdisplay:none;することで、見えないようにしています！
　cursor:pointer;でカーソルをポインターにすることでクリック可能な部分をわかりやすくします。

jQueryで動かす

$(function(){
    $('.dropdwn li').hover(function(){
        $("ul:not(:animated)", this).slideDown();
    }, function(){
        $("ul.dropdwn_menu",this).slideUp();
    });
});

解説！

$(‘.dropdwn li’).hover(function(){ 〇 }で.dropdwnの中のliにマウスが乗ったとき、〇をして！となります。

その後の, function(){ △ }でマウスが乗っていないとき、△をしてとなります。

〇の部分“$(“ul:not(:animated)”, this).slideDown();”の解説

　まず簡単な部分の“.slideDown();”は、隠していた部分を下にスライドさせて！となります。
　“this”は.dropdwn liの子要素のulなので、ul.dropdwn_menuのことです！

重要！
　“ul:not(:animated)”はアニメーションの途中にアニメーションを実行しないでという意味で、これがないとアニメーション中に.dropdwnのliにマウスを乗せたとき、マウスを置いた回数だけアニメーションが実行されてしまいます！

試しに、“ul:not(:animated)”を消したデモも作成してみました。

DEMO

このように、マウスを置いた回数だけアニメーションを実行されてしまうので、マウスを置いてなくても動いてしまいます。

△の部分“$(“ul:not(:animated)”, this).slideDown();”の解説

　△の部分はいたって普通でマウスが離れた時、“.slideUp();”で上にスライドさせて！となります。

やや説明が長くなりましたが、無事ドロップダウンメニューが完成しましたね！

あとは自分好みにカスタマイズしてみてください！