jQuery

【jQuery】孫階層まであるプルダウンメニューを作る方法

jQueryを使えば、メニューを多階層のプルダウンメニューにすることができます。
もちろんCSSでもできるみたいですが、せっかくjQueryでできるのなら作っておきたい。
 
プルダウンメニューを再現してみたのでここにまとめておきたいと思います。
 

jQueryでのプルダウンメニューの作り方

基本的な流れは以下の通り

  1. HTMLでメニュー構造の作成
  2. CSSでレイアウトを整える
  3. jQueryでドロップダウンの動きをつける

 
実際に実装したメニューがこちらです。

See the Pen
mZJxvE
by kei (@kei_01011)
on CodePen.

  • 親メニューにマウスを合わせると、
  • 子供メニューが表示され、
  • 子供メニューにマウスを合わせると、孫メニューが表示
  • どこかをクリックすると、メニュー全体が隠れる

 
理解しておきたいのが、HTMLの階層構造です。

    <nav>
        <ul class="main_menu">
            <li><a href="#"> メニュー1</a>
                <ul>
                    <li><a href="">子メニュー</a>
                        <ul>
                            <li><a href="#">孫メニュー</a></li>
                            <li><a href="#">孫メニュー</a></li>
                            <li><a href="#">孫メニュー</a></li>
                        </ul>
                    </li>
                    <li><a href="">子メニュー</a>
                        <ul>
                            <li><a href="#">孫メニュー</a></li>
                            <li><a href="#">孫メニュー</a></li>
                            <li><a href="#">孫メニュー</a></li>
                        </ul>
                    </li>
                    <li><a href="">子メニュー</a>
                        <ul>
                            <li><a href="#">孫メニュー</a></li>
                            <li><a href="#">孫メニュー</a></li>
                            <li><a href="#">孫メニュー</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
      </ul>
</nav>

 
このように、
親メニュー、子メニュー、孫メニューそれぞれにulとliがあり、階層構造になっています。
「入れ子」と呼ばれるものですが、これをHTMLで作れないとプルダウンメニューは作れませんので、復習です。
 
 
CSSの設定は、フォントや装飾が中心ですが、一つだけ大事なのが、「子メニューのdisplay:none;」です。
これをしておかないと、プルダウンメニューが動作しません。
 

jQueryの書き方

jQueryは以下のように書いていきます。

  1. マウスが乗ったら
  2. 兄弟要素に含まれるサブメニューを全部消す
  3. サブメニューをslideDownで表示
  4. どこかのサブメニュー(または外部)がクリックされたら
  5. サブメニューをslideUpで消す

 

$(function(){
    $(".main_menu li").mouseenter(function(){
    // マウスが乗ったら
        $(this).siblings().find("ul").hide();
    // 兄弟要素に含まれるサブメニューを全部消す
        //①this=.mein_menu li
        //②siblings= thisの兄弟要素を全部表示
        //③find=②で探された中から"ul"のセレクタを見つける
        //④hideでulのセレクタを隠す
        $(this).children().slideDown(200);
// サブメニューをslideDownで表示
        //①this=.mein_menu li
        //②children=thisの子要素を調べる
        //③②で見つけた子要素をslideDownで表示
         });
         $("html").click(function(){
// どこかのサブメニュー(または外部)がクリックされたら
        //html=ページの中のどこかがクリックされたら
        $(".main_menu ul").slideUp(200);
// サブメニューをslideUpで消す
    });
});

 
それぞれのメソッドの説明は、コメントしてありますが、このようにするとプルダウンメニューが完成します。
thisfindは頻出なので、理解をしておいたほうがいいと思いました。
 

プルダウンをhoverで作ってみる

Progateで学んだのはhoverだったので、hoverでもできるんじゃね?と思い、やってみました。

See the Pen
jjPxQJ
by kei (@kei_01011)
on CodePen.


結果から言うと、hoverの方が簡単に、書く量も少なくてすみました。
 
どっちでもいいのかなー
コード量が少ない方がいいのなら、hoverを使っていこうかなと思いました。
 
 
参考になったサイトはこちら