JQueryでメガメニューを実装する方法【プラグインなし】

2021年2月2日

メガメニューとは、展開可能なメニューのことです。

だいたいはドロップダウン形式で、マウスをホバーすると内部メニューが出てきます。

例えば、慶應義塾大学病院ホームページの下記部分がメガメニューです。リンクから実際に確かめてみてください。

こちらはJQueryで簡単に作ることができるので、メモがてらに残しておきます。

サンプル

  • サンプル１
    • ドロップダウン１ー１
    • ドロップダウン２ー２
    • ドロップダウン１ー３
  • サンプル２
    • ドロップダウン２−１
    • ドロップダウン２ー２
    • ドロップダウン２ー３
  • サンプル３
    • ドロップダウン３ー１
    • ドロップダウン３ー２
    • ドロップダウン３ー３



簡素ですが、上記がメガメニューです。コードは下記になります。

sample.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<!DOCTYPE html>
<html>
    <head>
        <script src="https://code.jquery.com/jquery-3.4.0.min.js" integrity="sha256-BJeo0qm959uMBGb65z40ejJYGSgR7REI4+CW1fNKwOg=" crossorigin="anonymous"></script>
    </head>
    <style>
        /*********
        メガメニュー
        **********/
        .mega-menu {
            list-style: none;
            margin: 0 auto;
            padding: 0 !importamt;
            text-align: left;
            position: relative; /* ドロップダウンをposition:absoluteにするため
        }
 
        .mega-menu > li {
            display: inline-block; /* リストを横並びにする*/
            width: 20px; /*ドロップダウンとメニューの幅を合わせる*/
            border-left: 1px solidblack;
            text-align: center;
  
        }
 
        .mega-menu > li:last-child {
            border-right: 1px solid black;
        }
 
        /***********
        ドロップダウン
        ************/
        .drop li{
            text-align: left;
        }
 
        .drop {
            display: none;/*ドロップメニューは、デフォルトでは見えないようにする*/
            border: 1px solid black;
            width: 200px;
            left: 0;
        }
    </style>
    <script>
    $(function() {
        $('.mega-menu > li').hover(function() {
        
        //マウスをホバーしたとき、slideDown(表示)する
        $(this).find('.drop').stop().slideDown();
 
      }, function() {
          //マウスを話したとき、slideUp(非表示)する
        $(this).find('.drop').stop().slideUp();
      });
    })
    </script>
    <body>
        <ul class="mega-menu">
            <li class="menu-list">
                <span>サンプル１</span>
                <div class="drop">
                    <ul>
                        <li>ドロップダウン１ー１</li>
                        <li>ドロップダウン２ー２</li>
                        <li>ドロップダウン１ー３</li>
                    </ul>
                </div>
            </li>
            <li class="menu-list">
                <span>サンプル２</span>
                <div class="drop">
                    <ul>
                        <li>ドロップダウン２−１</li>
                        <li>ドロップダウン２ー２</li>
                        <li>ドロップダウン２ー３</li>
                    </ul>
                </div>
            </li>
            <li class="menu-list">
                <span>サンプル３</span>
                <div class="drop">
                    <ul>
                        <li>ドロップダウン３ー１</li>
                        <li>ドロップダウン３ー２</li>
                        <li>ドロップダウン３ー３</li>
                    </ul>
                </div>
            </li>
        </ul>
    </body>
</html>

解説

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<style>
/********
メガメニュー
**********/
.mega-menu {
     list-style: none;
     text-align: left;
     margin: 0 auto;
     padding: 0 !important;
     position: relative; /* ドロップダウンをposition:absoluteにするため（重要②）*/
}
 
.mega-menu > li {
     display: inline-block; /* リストを横並びにする*/
     width: 100px; /*ドロップダウンとメニューの幅を合わせる*/
     border-left: 1px solid black;
     text-align: center;
}
 
.mega-menu > li:last-child {
     border-right: 1px solid black;
}
 
/***********
ドロップダウン
************/
.drop {
     display: none;/*ドロップメニューは、デフォルトでは見えないようにする(重要①)*/
     position: absolute; /*ドロップダウンメニューはabsoluteにする(重要②) */
     border: 1px solid black;
     width: 308px; /*メガメニューの幅と合わせる*/
     left:  0;
}
 
.drop li{
     text-align: left;
}

CSSでは重要な部分が二つあります。

まず、ドロップダウンリストはデフォルトで非表示にしてある点です。

マウスをホバーした時に表示される挙動はJQueryでコントロールするので、display: none;だけでOKです。

次に、ドロップダウンリストをposition:absolute;にしてある点です。

これを忘れるとドロップダウンが表示された際にメガメニューがずれてしまうので、忘れずに書きましょう。

そしてposition:absolute;が適用されるには、親要素がpositon:relative;である必要があります。

なのでメガメニュー(.mega-menu)はposition:relativeにしてあります。

後の部分はデザインなので、適宜自由に変えてください。

JQuery

1
2
3
4
5
6
7
8
9
10
11
$(function() {
    $('.mega-menu > li').hover(function() {
        //マウスをホバーしたとき、slideDown(表示)する
        $(this).find('.drop').stop().slideDown();
 
        }, function() {
          //マウスを話したとき、slideUp(非表示)する
        $(this).find('.drop').stop().slideUp();
    });
})

JQueryでは、メガメニューのli要素にホバーした時、子要素のドロップダウンリストが表示(slideDown)するようにしてあります。

そしてホバーが外れたら非表示(slideUp)するようにします。

リストとドロップダウンはそれぞれ3つありますが、ドロップダウンはメガメニューの子要素にしてあるので、$(this)でホバーしたli要素のドロップダウンのみを取得することができます。

クラスをそれぞれ分ける必要がなくなるので、便利ですね。

JQueryでは特にライブラリも使わず、これだけで簡単に実現できます。

プログラミング

Posted by trs0125