恵比寿のWebサイト制作・Webデザインチームのブログ。Webデザインやコーディング、SEO対策まで幅広く手掛けています。

恵比寿のデザイン制作チームのブログです。

Webデザイン、
Web制作、
SEO対策の
ご依頼・ご相談

Contact

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

投稿日:2019-05-21 更新日:




thum2_3

 

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

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

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

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

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(){ △ }でマウスが乗っていないとき、△をしてとなります。

sozai1

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

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

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

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

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

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

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

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

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




この記事をシェアする

  • Twitter
  • Facebook
  • BookmarkB!
  • Pocket

Related Entries

この記事を書いた人

noda

noda

めざせ万能デザイナー。HTML/CSS、JavaScript、PHP、Photoshop、Illustratorを扱っています。好きな食べものはうどん。