1. ホーム /
  2. jQuery /
  3. jQueryでメガメニューを簡単自作

jQueryでメガメニューを簡単自作

  • このエントリーをはてなブックマークに追加
  • Pocket

スポンサードリンク

jQueryでプラグインに頼らず、簡単にメガメニューを実装する方法のご紹介です。

プラグインを使わなくても意外と簡単にヌルヌル動くメガメニューを実装できますので、ぜひ試してみてください。

メガメニューのソースコード全文

まずはメガメニューのソースコードを一気に全部ご紹介します。

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
<ul class="menu" id="menu">
 
  <!-- メニューボタン
   ここにマウスを乗せると下のコンテンツが表示される -->
  <li class="menu_list">
    <a href="#">メニュー01</a>
 
    <!-- メガメニュー
     一旦非表示にし、マウスを乗せたボタンに連動したコンテンツのみ表示 -->
    <div class="menu_contents">
      <ul>
        <li><a href="#">メニュー01コンテンツ</a></li>
        <li><a href="#">メニュー01コンテンツ</a></li>
        <li><a href="#">メニュー01コンテンツ</a></li>
      </ul>
    </div>
  </li>
 
  <li class="menu_list">
    <a href="#">メニュー02</a>
    <div class="menu_contents">
      <ul>
        <li><a href="#">メニュー02コンテンツ</a></li>
        <li><a href="#">メニュー02コンテンツ</a></li>
        <li><a href="#">メニュー02コンテンツ</a></li>
      </ul>
    </div>
  </li>
 
  <li class="menu_list">
    <a href="#">メニュー03</a>
    <div class="menu_contents">
      <ul>
        <li><a href="#">メニュー03コンテンツ</a></li>
        <li><a href="#">メニュー03コンテンツ</a></li>
        <li><a href="#">メニュー03コンテンツ</a></li>
      </ul>
    </div>
  </li>
 
</ul>

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
/* ①メニューボタンのスタイル */
.menu {
  display: flex;
  position: relative;
}
.menu .menu_list {
  width: 33.33%;
}
.menu .menu_list > a {
  border: 1px solid #ccc;
  display: block;
  padding: 10px;
  text-align: center;
  transition: .3s;
}
.menu .menu_list > a:hover {
  color: #fff;
  background: #fb4343;
}
 
/* ②メガメニューのスタイル */
.menu_contents {
  background: #fb4343;
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
}
.menu_contents li {
  width: 100%;
}
.menu_contents li a {
  color: #fff;
}

jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$(function() {
 
  // ①マウスをボタンに乗せた際のイベントを設定
  $('#menu li').hover(function() {
 
    // ②乗せたボタンに連動したメガメニューをスライドで表示させる
    $(this).find('.menu_contents').stop().slideDown();
 
  // ③マウスをボタンから離した際のイベントを設定
  }, function() {
 
    // ④マウスを離したらメガメニューをスライドで非表示にする
    $(this).find('.menu_contents').stop().slideUp();
 
  });
 
});

 結果（動作サンプル）

以下メニューボタンにマウスを乗せると隠れていたメガメニューがスライドで表示され、マウスを離すと戻るかと思います。

ソースコード解説

上記サンプルのソースコードを解説します。

CSS

①メニューボタン

メニューボタンをCSSのflexを使って3分割の横並びレイアウトにします。

メニューの親要素にposition: relative;を指定することで、メニューの親要素を基準にその下からメガメニューがスライドで表示されるようにします。

②メニューコンテンツ

スライドで表示させるため、初期状態はdisplay: none;で非表示にします。

メガメニューをメニューエリア全体の幅にするためposition: absolute;を指定し、①で指定した親要素と同じ幅にします。

top: 100%;を指定すると、メニューボタンの真下からメガメニューをスライド表示させることができます。

jQuery

①マウスを乗せたら発動

1
2
// ①マウスをボタンに乗せた際のイベントを設定
$('#menu li').hover(function() {

セレクタに指定した要素にマウスを乗せると発動するhoverイベントです。

参考：jQueryのhover()でマウスオーバーの処理

②メニューを表示

1
2
// ②乗せたボタンに連動した子要素をスライドで表示させる
$(this).find('.menu_contents').stop().slideDown();

マウスを乗せたボタンに連動したメガメニューをスライドで表示させます。

$(this)で乗せたボタンを指定しfind()でその子要素を指定しています。

参考：jQueryの$(this)の使い方(どこを指してるのか？)
参考：find() で子要素、孫要素を取得

stop()はバブリングを防ぐために使っています。

バブリングの詳細は以下のページでご紹介しています。

参考：mouseover()との違い

slideDown()は非表示のメガメニューをスライドさせながら表示させる関数です。

③マウスを離したときの処理も設定

1
2
// ③マウスをボタンから離した際のイベントを設定
}, function() {

hover()のあとにfunction()をカンマ区切りで繋げることで、マウスを離したときの処理も設定できます。

④マウスを離したときの処理も設定

1
2
// ④マウスを離したら子要素をスライドで非表示にする
$(this).find('.menu_contents').stop().slideUp();

②の反対の処理でslideUp()を使ってメガメニューをスライドさせながら非表示にしています。

スポンサードリンク

  • このエントリーをはてなブックマークに追加
  • Pocket

コメントを残す

*