GeneratepressのElementsを使ってメガメニュー

こんにちは！
先日他のWEBデザイナーさんと話している時に、「メガメニューの設定が無いテーマにメガメニューを入れる方法」が話題にのぼりました。
「Max Mega Menu」というプラグインを使うとか、色々な話が出ていましたが、『GeneratePress Premiumだったら、結構簡単に実装できそうだな～』と思ったので、チャットちゃん（ChatGPT）と相談しながら実装してみました。
（この間記事にも書いたのですが、GeneratePressは私のおすすめのWordPressテーマです。）

オーソドックスなメガメニューなら…

Generatepressではグローバルメニューを自動的にメガメニュー化してくれるCSSリソースが公開されていますので、もし既存のナビゲーションメニューを簡単にメガメニューにしたいという方はこちらの方法がおすすめです。
こちらはPremiumでなくても実装可能です。

こちらのCSSコード（Documentation：Building a Simple Mega Menu）をコピーしてカスタムCSSに読み込み、メガメニュー化したい項目に「mega-menu」「mega-menu-col-2」「mega-menu-col-3」「mega-menu-col-4」「mega-menu-col-5」などのclassを付与すれば完成です！

より自由度の高いメガメニュー

もしグローバルメニューではなく、更に自由度の高いメガメニューエリアを作りたい場合はPremiumの「Elements」機能を活用します。

ざっくりとした流れは

Elementsを使って、メガメニューエリアを作成
Elementsを使って、jQueryコードを追記
CSSで制御
ナビゲーションメニューにclassを追加

です。

「Elements」機能を使うにはまず、「GP Premium」プラグインをインストールして、ライセンスキーを入力し、有効化する必要があります。GP Premiumは有料（年額59$）です。なお今回のやり方ではGP Premiumは必要ですが、GenerateBlocks Proは不要です。

デモ

このページの上にあるナビゲーションメニューの「ブログ」にカーソルをあわせてみてください！メガメニューのサンプルが現れます。（パソコン限定）

１．メガメニューのブロックを作る

メインメニューの「外観」→「Elements」を選択し、「Add New Element」から「Element Type」で「Block」を選択します。

「Location」（表示するページ）で「Entrie Site」（全てのページ）を選択し、Elements設定エリアの「Hook name」（配置場所）で「after_header_contents」を選択します。

コードエリアに、メガメニューに表示したい内容をHTMLなどで作成して公開します。

<div class="mega-menu-wrapper">
<div class="mega-menu-inner">

<!-- ここに自由にメガメニューのコードを作成 -->

</div>
</div>

<div class="mega-menu-wrapper">
<div class="mega-menu-inner">

<!-- ここに自由にメガメニューのコードを作成 -->

</div>
</div>

２．jsコードを作成

再び新しいElementsを追加します。
今度は「Add New Element」から「Element Type」で「Hook」を選択します。

「Setting」の「Hook」で「wp_footer」を選択。

「Display Rules」で「Location」を「Entrie Site」に設定して、コードエリアに以下のjQueryコードを入れます。

<script>
jQuery(function($) {
  const $menuItem = $('.menu-item--service');
  const $megaMenu = $('.mega-menu-wrapper');

  if ($menuItem.length && $megaMenu.length) {
    $menuItem.add($megaMenu).hover(
      function() {
        $megaMenu.addClass('is-active');
      },
      function() {
        $megaMenu.removeClass('is-active');
      }
    );
  }
});
</script>

<script>
jQuery(function($) {
  const $menuItem = $('.menu-item--service');
  const $megaMenu = $('.mega-menu-wrapper');

  if ($menuItem.length && $megaMenu.length) {
    $menuItem.add($megaMenu).hover(
      function() {
        $megaMenu.addClass('is-active');
      },
      function() {
        $megaMenu.removeClass('is-active');
      }
    );
  }
});
</script>

３．CSSを追記

以下のコードをカスタムCSSに追加します。

.mega-menu-wrapper {
    position: absolute;
    padding: 30px;
    top: 100%;
    left: 0;
    width: 100%;
    background: #fff;
    border-top: 1px solid #eee;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 100;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: all 0.3s ease;
}
.mega-menu-wrapper.is-active {
    max-height: 1000px;
    opacity: 1;
}

.mega-menu-wrapper {
    position: absolute;
    padding: 30px;
    top: 100%;
    left: 0;
    width: 100%;
    background: #fff;
    border-top: 1px solid #eee;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 100;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: all 0.3s ease;
}
.mega-menu-wrapper.is-active {
    max-height: 1000px;
    opacity: 1;
}

４．メニューアイテムにclassを追加

後は、このメガメニューを表示させたいメニューアイテムに、「menu-item–service」というclassを追加すれば完成です！

１．「外観」→「メニュー」→「表示オプション」で「CSSクラス」にチェック。
２．メニューアイテムに、「menu-item–service」というclassを追加

以上で完成です！お試しください。