slideToggleを使って簡易的なメガメニューを作成（レスポンシブ対応）

PC版のサイトでコンテンツ量（ページ数）の多いナビゲーションメニューを作成時、ボタンにカーソルを合わせるとニュッと出てくるメガメニューをjQueryのslideToggleメソッドを使って、数行でいい感じに表示させる方法を備忘録代わりにまとめておきます。

※メガメニューはメガナビゲーションメニュー・メガドロップダウンとも呼ばれています。
テキストだけのリンクだけでなく、広いスペースでアイキャッチ画像を入れるなどして、多層構造のリンクをわかりやすく表示させることができます。

よくわからない人は完成DEMOを先に見たほうがわかりやすいかと。
DEMO

やってる事の流れをサクッと解説するとこんな感じ

多層構造のナビゲーションのHTMLを書く
ホバーだけのリンクはa タグの画面遷移を無効化する
スライドするようのjQueryを書く
メガメニューを表示中はコンテンツ部分が黒くなってオーバーレイ表示
スマホはホバーできないので、通常のアコーディオンメニューに差し替える

多層構造のナビゲーションのHTMLを準備

今回は、ナビゲーションの「メニュー01」と「メニュー03」だけ、メガメニューを表示する想定で作成します。

1<nav class="main_menu">
2  <ul class="main_nav">
3    <li class="mega_btn">
4      <a href="javascript:void(0)">メニュー01</a>
5        <div class="mega_menu">
6          <p class="ttl">メガメニューの中身</p>
7          <ul class="child">
8            <li>
9              <a href="">
10                <img src="img/sample.jpg" alt="">
11                <span>メニュー01-01</span>
12              </a>
13            </li>
14            <li>
15              <a href="">
16                <img src="img/sample.jpg" alt="">
17                <span>メニュー01-02</span>
18              </a>
19            </li>
20            <li>
21              <a href="">
22                <img src="img/sample.jpg" alt="">
23                <span>メニュー01-03</span>
24              </a>
25            </li>
26          </ul>
27      </div>
28      <!-- /.mega_menu -->
29    </li>
30    <li><a href="">メニュー02</a></li>
31    <li class="mega_btn">
32      <a href="javascript:void(0)">メニュー03</a>
33      <div class="mega_menu">
34        <p class="ttl">メガメニューの中身</p>
35        <ul class="child">
36          <li>
37            <a href="">
38              <img src="img/sample.jpg" alt="">
39              <span>メニュー03-01</span>
40            </a>
41          </li>
42          <li>
43            <a href="">
44              <img src="img/sample.jpg" alt="">
45              <span>メニュー03-02</span>
46            </a>
47          </li>
48          <li>
49            <a href="">
50              <img src="img/sample.jpg" alt="">
51              <span>メニュー03-03</span>
52            </a>
53          </li>
54        </ul>
55      </div>
56      <!-- /.mega_menu -->
57    </li>
58    <li><a href="">メニュー04</a></li>
59  </ul>
60</nav>
61<!-- /.main_menu -->

メガメニュー内はulから書いてもいいですが、メガメニュー内でタイトルとかテキストとか使う可能性もあるので＜div＞〜＜/div＞で囲うにしています。

CSSは適正調整してください。
しいていえば、ホバー時以外は非表示にさせるためにdisplay:noneを入れておきます。

1.main_menu .main_nav .mega_menu {
2    display: none;
3}

今回親階層には、リンクがなしという事なので、aタグを無効化しておく必要があります。

`1`	`<a` `href="javascript:void(0)">メニュー01</a>`

メガメニュー用のjQueryを書く

jQueryの記述はシンプルにこんな感じ

1$(function () {
2  $('.main_nav > .mega_btn').hover(function(){
3      $(this).children('.mega_menu').stop().slideToggle();
4      $('body').toggleClass('overlay');
5  });
6});

メガメニュー表示中はコンテンツ部分を黒くして、メニューが開いている感じを出す

最後の行の「$(‘body’).toggleClass(‘overlay’);」でbodyにメガメニュー表示中の時だけclassを付与することによってオーバーレイ表示がされるようにしています。
各コンテンツのz-indexの前後関係に注意が必要です。

1body {
2    position: relative;
3    -webkit-transition: all 0.6s;
4    transition: all 0.6s;
5}
6body:after {
7    width: 100%;
8    height: 100%;
9    position: absolute;
10    background-color: rgba(0,0,0,0.4);
11    content: '';
12    left: 0;
13    top: 0;
14    z-index: -1;
15    opacity: 0;
16    -webkit-transition: all 0.6s;
17    transition: all 0.6s;
18}
19body.overlay:after {
20    z-index: 1;
21    opacity: 1;
22}

疑似要素で全面に半透明の黒のバックグラウンドカラーがあたっているイメージですね。

スマホでは、メガメニューでなくシンプルなアコーディオンメニューにする

スマホでは、ホバーが効かないので同じHTMLを使う場合はクリックで反応するメニューに変える必要があるので、PCとスマホ（今回は正確にはWindow幅）でjQueryのタイプを変更する必要があります。
スマホの方はシンプルなアコーディオンメニューにしました。

1$(window).on('load resize', function(){
2  var winW = $(window).width();
3  var devW = 767;
4  if (winW <= devW) {
5    $(function(){
6        $(".main_nav > .mega_btn").on("click", function() {
7            $(this).children('.mega_menu').slideToggle();
8        });
9    });
10  } else {
11    $(function () {
12      $('.main_nav > .mega_btn').hover(function(){
13          $(this).children('.mega_menu').stop().slideToggle();
14          $('body').toggleClass('overlay');
15      });
16    });
17  }
18});

スマホの表示領域を考えると、メガメニューよりテキストリンクにしておいたほうがいい場合もありますので、今回はPC版で表示させていたタイトルや画像はdisplay:noneで非表示にしておきます。

1.main_menu .main_nav .mega_menu {
2    position: static;
3    display: none;
4    padding: 20px;
5}
6.main_menu .main_nav .mega_menu .ttl {
7    display: none;
8}
9.main_menu .main_nav .child {
10    display: block;
11}
12.main_menu .main_nav .child li {
13    margin-right: 0;
14    text-align: left;
15}
16.main_menu .main_nav .child li img {
17    display: none;
18}
19.main_menu .main_nav .child li:last-child {
20    margin-right: 0;
21}
22.main_menu .main_nav .child li a {
23    display: block;
24    padding-left: 1em;
25}

ハンバーガーメニューとかの表示は今回省いています。
必要な場合は、追っかけ設置してみて下さい。

こちらが全部の完成版のDEMOになります。
DEMO

まとめ

それなりの規模のサイトを作る場合は、メガメニューはPCの場合は特に利用頻度が高いので、覚えておいて損はないかと思います。ただ、PCとスマホでの表示部分をうまく調整する必要があります。
今回は以上です。

slideToggleを使って簡易的なメガメニューを作成（レスポンシブ対応）

多層構造のナビゲーションのHTMLを準備

メガメニュー用のjQueryを書く

メガメニュー表示中はコンテンツ部分を黒くして、メニューが開いている感じを出す

スマホでは、メガメニューでなくシンプルなアコーディオンメニューにする

まとめ

Share

こちらの記事もあわせてどうぞ

アコーディオンメニューのページ内リンクでタップ時にメニューを閉じる

(K)jQueryのslideToggleを使ってスマホに最適なアコーディオンメニューを作成

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル