MENU
  1. ホーム
  2. JavaScript
  3. 【jQuery | メガメニュー】作り方・CodePen付き【ホバー/クリック/fade/slideTogge/メニュー外クリックで閉じる】

【jQuery | メガメニュー】作り方・CodePen付き【ホバー/クリック/fade/slideTogge/メニュー外クリックで閉じる】

JavaScript
メガメニュー頻出４パターンの作り方のサムネイル
SIM

こんにちはSIMです。今日はメガメニューの頻出4パターンについて紹介します。

目次

はじめに

メガメニューとは？

メガメニューとは、ナビゲーションの一種で、広い面積を持つドロップダウンメニューのことです。メガドロップダウンメニューとも言います。

SIM

実物をお見せすると下のとおりで、幾つか種類があります。

See the Pen メガメニュー | hover |SlideToggle by Satoru Shimizu (@sat-simizu) on CodePen.

今回作るメガメニュー頻出４パターン

SIM

今回作るのは次の頻出４パターンのメガメニューです。

今回作るメガメニュー４パターン
  • ホバー操作でスライドアップ・ダウン（例：Apple・BRIDGESTONE）
  • ホバー操作でフェードイン・アウト（例：野村総合研究所・テルモ）
  • クリック操作でスライドアップ・ダウン（例：FUJITSU・三菱総合研究所）
  • クリック操作でフェードイン・アウト
SIM

インターネットを見て回ると、hover操作でslideUp・slideDownするタイプが多い印象です。

メガメニューのレスポンシブについて

メガメニューはモバイル端末ではほぼ例外なくハンバーガーメニューに変わります。そのため、メガメニューをレスポンシブ化する場合にはモバイル端末ではハンバーガーメニューに変わるようにコーディングします。

SIM

そうなると、もはやメガメニューですらないので、この記事では敢えてメガメニューのレスポンシブについては語らないことにします。

私の場合は、PC用とスマホ用でヘッダーグローバルナビゲーションは別々に作ることが多いです。コード量は多くなる代わりにバグる確率がかなり減ります。

メガメニューの下準備

SIM

最初にコーディングに下準備から紹介していきます。

リセットCSS

リセットCSSが違うと、同じ表示にならないことが多いので完コピしたい人は下記リセットCSS（CDN）をHTMLのheadタグ内にコピペして下さい。

  <!-- reset.css destyle -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/destyle.css@1.0.15/destyle.css" />

jQuery（CDN）読み込み

SIM

同じくjQuery（CDN）も読み込まないと、そもそも動作しないので忘れずにHTMLのbody閉じタグ直上にコピペして下さい。

補足として、自分のサイト用のJavaScriptファイルへのパスも同じ場所に書くのを忘れないで下さい。

  <!-- jQueryの（CDN） -->
  <script src="https://code.jquery.com/jquery-3.6.1.min.js"
    integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
  <!-- このサイトのスクリプト -->
  <script src="./script.js"></script>

メガメニュー | ホバー操作 | スライドダウン・アップ

SIM

まずはオーソドックスなマウスホバー操作でメガメニューがスライドダウンして出てくるタイプから見ていきましょう。

下に完成品のCodePenを貼っておくので、動作とコードを確認してみてください。

See the Pen メガメニュー | hover |SlideToggle by Satoru Shimizu (@sat-simizu) on CodePen.

HTMLの構造

SIM

HTML構造は今回紹介するメガメニュー４種とも共通です。

メガメニュー部分のHTMLを下に載せておきます。

      <ul class="menu" id="mega_menu">

        <!-- メニュー（親） -->
        <!-- マウスをhoverすると下にメガメニューのコンテンツが現れる -->
        <li class="menu-parent">
          <a href="#" class="menu-parent_a">和食メニュー</a>
          <!-- メガメニュー（子） -->
          <!-- 通常は非表示／マウスhoverでメニュー（親）のメガメニュー（子）が現れる -->
          <div class="menu-child">
            <ul class="menu-child_ul">
              <li class="menu-child_li">
                <a href="#" class="menu-child_li-a">サンマ定食</a>
              </li>
              <li class="menu-child_li">
                <a href="#" class="menu-child_li-a">ホッケ定食</a>
              </li>
              <li class="menu-child_li">
                <a href="#" class="menu-child_li-a">刺し身定食</a>
              </li>
            </ul>
          </div>
        </li>

        <li class="menu-parent">
          <a href="#" class="menu-parent_a">洋食メニュー</a>
          <div class="menu-child">
            <ul class="menu-child_ul">
              <li class="menu-child_li">
                <a href="#" class="menu-child_li-a">豚生姜焼き定食</a>
              </li>
              <li class="menu-child_li">
                <a href="#" class="menu-child_li-a">ロースカツ定食</a>
              </li>
              <li class="menu-child_li">
                <a href="#" class="menu-child_li-a">ハンバーグ定食</a>
              </li>
            </ul>
          </div>
        </li>

        <li class="menu-parent">
          <a href="#" class="menu-parent_a">麺類メニュー</a>
          <div class="menu-child">
            <ul class="menu-child_ul">
              <li class="menu-child_li">
                <a href="#" class="menu-child_li-a">醤油ラーメン</a>
              </li>
              <li class="menu-child_li">
                <a href="#" class="menu-child_li-a">味噌ラーメン</a>
              </li>
              <li class="menu-child_li">
                <a href="#" class="menu-child_li-a">豚骨ラーメン</a>
              </li>
            </ul>
          </div>
        </li>

      </ul>
SIM

この中から直接メガメニュー動作に関係している箇所を抜粋したのが次のコードです。

        <!-- メニュー（親） -->
        <!-- マウスをhoverすると下にメガメニューのコンテンツが現れる -->
        <li class="menu-parent">
          <!-- メニュー（兄）:ここ以外の場所をクリックしたらメガメニュー（子）がスライドアップ -->
          <a href="#" class="menu-parent_a">和食メニュー</a>
          <!-- メガメニュー（子） -->
          <!-- 通常は非表示／マウスhoverでメニュー（親）のメガメニュー（子）が現れる -->
          <div class="menu-child">
            <ul class="menu-child_ul">
              <li class="menu-child_li">
                <a href="#" class="menu-child_li-a">サンマ定食</a>
              </li>
              <li class="menu-child_li">
                <a href="#" class="menu-child_li-a">ホッケ定食</a>
              </li>
              <li class="menu-child_li">
                <a href="#" class="menu-child_li-a">刺し身定食</a>
              </li>
            </ul>
          </div>
        </li>
SIM

メガメニューに関係する各タグの役割を書いておくと次のようになります。

メガメニュー動作に直接影響するタグと役割
  • メニュー（親）class=”menu-parent”のliタグ：マウスをhoverすると下にメガメニューのコンテンツが現れる
  • メガメニュー（子）class=”menu-child”のdivタグ：通常は非表示／マウスhoverでメニュー（親）のメガメニュー（子）が現れる
  • メニュー（兄）class=”menu-parent_a”のaタグ：メニュー（兄）以外の場所をクリックしたらメガメニュー（子）がスライドアップする

CSSの構造

SIM

今回紹介するCSSもほぼ共通です。

メガメニュー部分のCSS全文は次のとおりですが、ほとんどが体裁を整えるための装飾なので実際にメガメニューの動作に関係している箇所は少ないです。

/* --------------------------- */
/* メニュー（親）のスタイル */
/* --------------------------- */
.menu {
  display: flex;
  position: relative;
  background-color: #370617;
  color: #fff;
}
.menu-parent {
  width: calc(100% /3);
  border-right: 1px solid #fff;
}
.menu-parent:last-child {
  border-right: none;
}
.menu-parent_a {
  display: block;
  padding: 10px 0;
  text-align: center;
}
/* --------------------------- */
/* メニュー（親）の直接動作に関係する箇所 */
/* --------------------------- */
/* 親をhover時 */
@media (hover: hover) {
  .menu-parent:hover .menu-parent_a{
    background-color: #9d0208;
    transition: all .3s;
  }
}
 /* --------------------------- */
/* メガメニュー(子)のスタイル */
/* --------------------------- */
.menu-child {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  padding: 20px 0;
  background-color: #ffbf69;
  color: #333;
}
.menu-child_ul{
  list-style-type: disc;
}
.menu-child_li {
  width: 200px;
  margin: 0 auto;
  line-height: 2;
}
SIM

こちらに直接メガメニュー動作に関係する箇所を抜粋すると下のようになります。

/* --------------------------- */
/* メニュー全体を囲うタグ */
/* --------------------------- */
.menu {
  display: flex;
  position: relative;
  background-color: #370617;
  color: #fff;
}
/* --------------------------- */
/* メニュー（親）の直接動作に関係する箇所 */
/* --------------------------- */
/* 親をhover時 */
@media (hover: hover) {
  .menu-parent:hover .menu-parent_a{
    background-color: #9d0208;
    transition: all .3s;
  }
}
 /* --------------------------- */
/* メガメニュー(子)のスタイル */
/* --------------------------- */
.menu-child {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  padding: 20px 0;
  background-color: #ffbf69;
  color: #333;
}
SIM

メガメニュー動作に影響する箇所のCSSについて解説すると下のとおりで非常にシンプルです。

メガメニュー動作に直接関係するCSS
  • メニュー（親）の直接動作に関係する箇所：マウスホバー時に変化する背景色の設定
  • メガメニュー(子)の直接動作に関係する箇所：通常はdisplay: noneで非表示、position: absoluteで位置設定
  • メニュー全体を囲うタグ：position: relativeに設定し、メガメニューの基準位置とする

jQueryの構造

SIM

jQueryも基本的には単純構造です。

メガメニューのjQuery全文は次のとおりです。

$(function() {
 
  // メニュー（親） にマウスhoverした時
  $('.menu-parent').hover(function() {
 
    // メガメニュー（子）をスライドダウンで表示
    $(this).find('.menu-child').stop().slideDown(400);
 
  // メニュー（親） にマウスhoverを外した時
  }, function() {
 
    // メガメニュー（子）をスライドアップで非表示
    $(this).find('.menu-child').stop().slideUp(50);
 
  });
     // メニュー（兄）以外の場所をクリックしたらメガメニュー（子）がスライドアップ
     $(document).on('click touchend', function (e) {
      if (!$(e.target).closest('.menu-parent_a').length) {
        $('.menu-child').slideUp(100);
      }
    });
});
SIM

それぞれの構文の役目は上でコメントアウトしたとおりで極めてシンプルです。

ただし、最後の「メニューの兄要素以外をクリックしたらメガメニューがスライドアップする機能」は付けてないホームページも多いので、必要に応じて削除してください。私個人はこの機能が付いていた方が使いやすいと思います。

メガメニュー | ホバー操作 | フェードイン・アウト

SIM

次は同じくホバー操作でメガメニューがフェードでフワッと現れるパターン。

CodePenで作ったメガメニュー見本を下に置いておくので、動作とコードをご確認下さい。

See the Pen メガメニュー | hover | fade by Satoru Shimizu (@sat-simizu) on CodePen.

なお、HTMLとCSSは上で紹介したスライドイン・アウトの場合と共通なので説明は省略します。

jQueryの構造

SIM

jQueryの構文も上の例とほぼ共通です。一応jQuery全文も下に載せておきます。

$(function() {
 
  // メニュー（親） にマウスhoverした時
  $('.menu-parent').hover(function() {
 
    // メガメニュー（子）をスライドダウンで表示
    $(this).find('.menu-child').stop().fadeIn(300);
 
  // メニュー（親） にマウスhoverを外した時
  }, function() {
 
    // メガメニュー（子）をスライドアップで非表示
    $(this).find('.menu-child').stop().fadeOut(300);
 
  });
    // メガメニュー（兄）以外の場所をクリックしたらメガメニュー（子）がフェードアウト
    $(document).on('click touchend', function (e) {
      if (!$(e.target).closest('.menu-parent_a').length) {
        $('.menu-child').fadeOut(100);
      }
    });
});
SIM

前のスライドダウンのメガメニューと違っている箇所は整理すると下のとおりだよ。

slideDownのメガメニューと違う箇所
  • slideDown→fadeIn
  • slideUp→fadeOut

メガメニュー | クリック操作 | スライドダウン・アップ

SIM

次はコーディングがクリック操作で現れるメガメニューを紹介します。

茶色の横メニュー（activeクラス付き）以外に場所をクリックすると、メガメニューが閉じる機能も付いています。

まずはメガメニュー目本のCodePenを置いておくので、動作とコードを確認してみて下さい。

See the Pen メガメニュー | click by Satoru Shimizu (@sat-simizu) on CodePen.

SIM

HTMLは全部共通なので、説明は省略します。

CSSの構造

SIM

実はCSSもほぼ共通ですが、少しだけ違っています。

hover操作のメガメニューとのCSSの大きな違いは、クリック操作でメニューにactiveクラスが付与される設定になっています。

コピペする人のためにメガメニューのCSS全文も載せておきます。

body {
  font-family: "Noto Sans JP", "メイリオ", "Meiryo", "ＭＳ ゴシック",
    "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", sans-serif;
}
.base-container{
  padding: 50px 0;
}
/* --------------------------- */
/* メニュー（兄）のスタイル */
/* --------------------------- */
.menu {
  display: flex;
  position: relative;
  background-color: #370617;
  color: #fff;
}
.menu-parent {
  width: calc(100% /3);
  border-right: 1px solid #ccc;
}
.menu-parent:last-child {
  border-right: 0;
}
.menu-parent_a {
  display: block;
  padding: 10px;
  text-align: center;
}
.menu-parent_a.blrn{
  border-left: none;
  border-right: none;
}
/* --------------------------- */
/* メニュー（兄）の動作に直接関係する箇所 */
/* --------------------------- */
/* メニュー（兄）hover時に色を変える */
@media (hover: hover) {
  .menu-parent_a:hover{
    background-color: #9d0208;
    transition: all .1s;
  }
}
/* メニュー（兄）にactive付与されたとき色を変える */
.menu-parent_a.active{
  background-color: #9d0208;
}
 /* --------------------------- */
/* メガメニュー(弟)のスタイル */
/* --------------------------- */
/* メニュー（弟）は普段は非表示 */
.menu-child {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  padding: 20px 0;
  background-color: #ffbf69;
  color: #333;
}
.menu-child_ul{
  list-style-type: disc;
}
.menu-child_li {
  width: 200px;
  margin: 0 auto;
  line-height: 2;
}

ホバー操作のメガメニューと違っている部分のコード

SIM

ホバー操作のメガメニューとの違いは、メニュー（兄要素）のhover設定と、同じくメニュー（兄）にactiveクラスが付いた時のスタイル設定の２箇所のみです。

ホバー操作のメガメニューと違っている部分を抜粋したのが下のコードです。

/* --------------------------- */
/* メニュー（兄）の動作に直接関係する箇所 */
/* --------------------------- */
/* メニュー（兄）hover時に色を変える */
@media (hover: hover) {
  .menu-parent_a:hover{
    background-color: #9d0208;
    transition: all .1s;
  }
}
/* メニュー（兄）にactive付与されたとき色を変える */
.menu-parent_a.active{
  background-color: #9d0208;
}

メガメニュー（クリック操作）動作に直接関係する部分のCSS

SIM

メガメニュー動作に関係する箇所のCSSの機能をまとめると次のようになります。

メガメニュー（クリック操作）動作に関係するCSS
  • メニュー（兄要素）hover時に色を変える：「.menu-parent_a:hover {background-color…}」
  • メニュー（兄）にactive付与されたとき色を変える：「.menu-parent_a.active {background-color…}」
  • メガメニュー（弟）は普段は非表示：「.menu-child｛display: none; position: absolute; など｝」
  • メガメニューの基準位置：「.menu {position: relative;}」

jQueryの構造

SIM

jQueryもベースはhoverで動くメガメニューで
それに数行足しています。

メガメニュー（クリック操作・slideToggle）の全文は下の通りです。意外と短いですね。

$(function () {
  // メニュー（兄）をクリックしたら  
  $('.menu-parent_a').click(function () {
    // メガメニュー（弟）をスライドダウンまたはアップ
    $(this).siblings('.menu-child').slideToggle(300);
    // メニュー（兄）にactiveクラスを付与     
    $(this).addClass('active');
    // 別の兄弟のメガメニュー（弟）をスライドアップで非表示  
    $('.menu-parent_a').not($(this)).siblings('.menu-child').slideUp(100);
    // 別の兄弟のメニュー（兄）からactiveクラスを取り去る 
    $('.menu-parent_a').not($(this)).removeClass('active');

  });
   // メガメニューのリンク以外の場所をクリックしたらメガメニュー（弟）がスライドアップ・メニュー（兄）からactiveクラスを剥奪
  $(document).on('click touchend', function (e) {
    if (!$(e.target).closest('.menu-parent_a').length) {
      $('.menu-parent_a').removeClass('active');
      $('.menu-child').slideUp(100);
    }
  });
});
SIM

新たに足したコードは、slideToggleでactiveクラスの脱着に関するものと…

    // メガメニュー（弟）をスライドダウンまたはアップ
    $(this).siblings('.menu-child').slideToggle(300);
    // メニュー（兄）にactiveクラスを付与     
    $(this).addClass('active');
SIM

残りは、activeクラスが付いたメニュー以外をクリックすると、メガメニューが閉じる動作に関するコードです。

   // メガメニューのリンク以外の場所をクリックしたらメガメニュー（弟）がスライドアップ・メニュー（兄）からactiveクラスを剥奪
  $(document).on('click touchend', function (e) {
    if (!$(e.target).closest('.menu-parent_a').length) {
      $('.menu-parent_a').removeClass('active');
      $('.menu-child').slideUp(100);
    }
  });

メガメニュー | クリック操作 | フェードイン・アウト

SIM

最後にクリック操作で、メガメニューがフェードで現れるタイプの紹介です。

下の見本メガメニューのCodePenを置いておくので、動作とコードの確認をしてみて下さい。

See the Pen メガメニュー | click-fade by Satoru Shimizu (@sat-simizu) on CodePen.

SIM

なお、HTMLとCSSは上で紹介したメガメニュー（クリック操作・スライドダウン）と共通ですので説明は省略しますね。

jQueryの構造

SIM

jQueryの全文は下の通りで、基本はさっきのスライドダウンタイプとほぼ同じです。

$(function () {
  // メニュー（兄）をクリックしたら  
  $('.menu-parent_a').click(function () {
    // メガメニュー（弟）をフェードインまたはアウト
    $(this).siblings('.menu-child').fadeToggle(300);
    // メニュー（兄）にactiveクラスを付与     
    $(this).addClass('active');
    // 別の兄弟のメガメニュー（弟）をフェードアウトで非表示  
    $('.menu-parent_a').not($(this)).siblings('.menu-child').fadeOut(100);
    // 別の兄弟のメニュー（兄）からactiveクラスを取り去る 
    $('.menu-parent_a').not($(this)).removeClass('active');

  });
   // メガメニュー(兄)以外の場所をクリックしたらメガメニュー（弟）がフェードアウト・メニュー（兄）からactiveクラスを剥奪
  $(document).on('click touchend', function (e) {
    if (!$(e.target).closest('.menu-parent_a').length) {
      $('.menu-parent_a').removeClass('active');
      $('.menu-child').fadeOut(100);
    }
  });
});
SIM

さっきのスライドダウンタイプとの違いは下のとおり。

スライドダウン型メガメニューとの違い
  • slideToggle　→　fadeToggle
  • slideUp　→　fadeOut
SIM

動作がスライドからフェードに変わっただけですで、そこに関するコードを変更しただけです。

まとめ

以上、jQueryメガメニュー頻出４パターンの設定・作り方を紹介しました。

SIM

ネット上にはまとまった情報が少ないので、これをご覧になった方の参考になれば幸いです。

JavaScript
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！

この記事を書いた人

SIMのアバター SIM

■清水WEB制作代表
■コーディング：WordPress（オリジナルテーマ制作等）・HTML・Sass・FLOCSS・JavaScript（jQuery）等
■集客力：YouTube/Instagram/ブログでそれぞれ登録者数16000人/フォロワー13000人/月間最大アクセス50000PVの集客実績があります
■文章作成：博士号所有、会社員時代は科学雑誌に寄稿していたので文章作成も得意です
■写真技術：Amazon Kindle出版で、写真集・撮影編集解説書を５冊好評発売中です

関連記事

目次