mega-menu-builder

メガメニューの構築

概要

カテゴリー別の列、注目商品カード、プロモーションバナーを含む全幅パネルに展開する、横型のナビゲーションバーを構築します。メガメニューのコンテンツはプラットフォームの管理画面から管理でき、キーボード操作とスクリーンリーダーに対応します。また、モバイルではハンバーガードロワーへスムーズに切り替わります。

このスキルを使用する場面

• ストアに、サブカテゴリーが多数あるトップレベルカテゴリーが3つ以上ある場合
• カテゴリーへのリンクと並べて、プロモーションコンテンツ（季節のバナー、注目商品）を表示する必要がある場合
• ストアフロントの再設計の一環としてナビゲーションを再構築する場合
• 現在のドロップダウンメニューが、キーボードやスクリーンリーダーのユーザーにとってアクセシブルでない場合
• コードをデプロイせずに、マーチャンダイザーがナビゲーションコンテンツを管理する必要がある場合

主な指示

ステップ 1：マーチャントのプラットフォームを特定し、適切な方法を選択する

プラットフォーム	推奨される方法	理由
Shopify	Navigation 管理画面で階層メニューを設定し、メガメニューに対応したOS2.0テーマ（Impulse、Empire、Prestige）を使用するか、Meteor Mega Menu アプリをインストールします	ShopifyのNavigation管理画面は3階層のメニューに対応しています。Impulseなどのプレミアムテーマには、画像やバナーに対応したメガメニューセクションが組み込まれています
WooCommerce	Max Mega Menu プラグイン（無料版／Pro版）または WP Mega Menu を既存のWordPressテーマと併用します	Max Mega MenuはあらゆるWordPressテーマと連携し、任意のメニュー項目に画像ウィジェットやカスタムコンテンツを追加できます。また、ElementorやGutenbergでも動作します
BigCommerce	メガメニューに対応したテーマ（Cornerstone Advanced、Merchant）で、Theme Editorの Header & Navigation セクションを使用します。または、メガメニューブロックを含む Shogun ページビルダーをインストールします	BigCommerceのテーマによってメガメニューへの対応状況は異なります。Cornerstone Advancedにはメガメニューが組み込まれており、Shogunを使えばどのテーマにも追加できます
カスタム／ヘッドレス	ホバー／フォーカス時の開閉処理、キーボードナビゲーション（矢印キー、Escape）、モバイル向けアコーディオンドロワーを備えた、データ駆動型のメガメニューコンポーネントを構築します	コンテンツモデル、アニメーション、アクセシビリティのパターンを完全に制御できます。以下の実装例を参照してください

ステップ 2：ナビゲーションコンテンツを設定する

---

Shopify

階層ナビゲーションの設定：

1. Online Store → Navigation に移動します
2. Main menu を開きます（または新しく作成します）
3. メガパネルが必要なトップレベル項目ごとに、Add menu item をクリックし、インデント操作でその下にサブ項目を配置します
4. Shopifyでは、最大3階層（トップレベル → カテゴリー → サブカテゴリー）まで設定できます
5. メニューを保存します

対応テーマでメガメニューを有効にする：

メガメニューが組み込まれたテーマ（Impulse、Prestige、Empire）を使用している場合：

1. Online Store → Themes → Customize に移動します
2. Header セクションに移動します
3. Mega menu settings で、どのトップレベルのナビゲーション項目をメガパネルの表示対象にし、どれを通常のドロップダウンにするか選択します
4. 各メガパネルに、セクションエディターを使って画像ブロック、注目商品ブロック、プロモーションバナーブロックを追加します

Meteor Mega Menuアプリを使用する（あらゆるShopifyテーマで動作）：

1. Shopify App Storeからインストールします
2. アプリ内で、メガパネルを表示するメニュー項目を選択します
3. 各パネルに、リンクの列、商品カード（Shopifyカタログから取得）、画像／バナーブロックを追加します
4. アプリがテーマコードを編集せずに、メガメニューをテーマへ追加します

---

WooCommerce

Max Mega Menu（無料プラン）を使用する場合：

1. WordPress.org から Max Mega Menu をインストールします
2. 外観 → メニュー に移動し、メインナビゲーションメニューを開きます
3. Max Mega Menu Settings パネルで、このメニューに対して Max Mega Menu を有効にします
4. メガパネルを表示する各トップレベルのメニュー項目について、次の操作を行います。
   • 項目の Mega Menu トグルをクリックします
   • パネルのレイアウト（例：3 列）を選択します
5. 各列にメニュー項目、ウィジェット（画像、HTML、WooCommerce の商品ウィジェット）、またはテキストブロックを追加します
6. 外観 → Max Mega Menu → Appearance に移動し、パネルの幅を全幅に設定して、ホバー動作を設定します

Elementor との連携： ストアで Elementor を使用している場合は、Happy Addons または ElementsKit をインストールします。どちらにも Elementor のビジュアルエディター内で使える、ドラッグ＆ドロップ式のメガメニュービルダーが含まれています。

---

BigCommerce

Cornerstone Advanced テーマ：

1. Storefront → My Themes → Customize に移動します
2. Header セクションで Navigation style を探し、Mega Menu に設定します
3. 各トップレベルのカテゴリについて、Category の設定（Products → Categories → [category] → Image）で注目画像とバナーを追加できます
4. BigCommerce はメガパネルにサブカテゴリを自動で表示し、テーマによって複数列のレイアウトにレンダリングされます

Shogun ページビルダー：

1. BigCommerce App Marketplace から Shogun をインストールします
2. Shogun の Header コンポーネントを使って、列、画像、リンクを自由にドラッグ＆ドロップできるカスタムメガメニューを作成します
3. ヘッダーをすべてのページに適用して公開します

---

カスタム／ヘッドレス

ホバー／フォーカスによる開閉ロジックを備えたナビゲーションコンポーネント：

// MegaNav.jsx
import { useState, useRef } from 'react';

export function MegaNav({ items }) {
  const [activeItem, setActiveItem] = useState(null);
  const closeTimer = useRef(null);

  function openMenu(id) { clearTimeout(closeTimer.current); setActiveItem(id); }
  function scheduleClose() { closeTimer.current = setTimeout(() => setActiveItem(null), 150); }
  function cancelClose() { clearTimeout(closeTimer.current); }

  return (
    <nav aria-label="Main navigation">
      <ul role="menubar" className="nav-bar">
        {items.map(item => (
          <li key={item.id} role="none"
              onMouseEnter={() => item.megaMenu && openMenu(item.id)}
              onMouseLeave={scheduleClose}>
            <a href={item.url} role="menuitem"
               aria-haspopup={item.megaMenu ? 'true' : undefined}
               aria-expanded={activeItem === item.id ? 'true' : undefined}
               onFocus={() => item.megaMenu && openMenu(item.id)}
               onKeyDown={(e) => {
                 if ((e.key === 'ArrowDown' || e.key === 'Enter') && item.megaMenu) {
                   e.preventDefault();
                   openMenu(item.id);
                   document.querySelector(`#panel-${item.id} a`)?.focus();
                 }
                 if (e.key === 'Escape') setActiveItem(null);
               }}>
              {item.label}
            </a>
            {item.megaMenu && activeItem === item.id && (
              <MegaPanel id={`panel-${item.id}`} panel={item.megaMenu}
                onMouseEnter={cancelClose} onMouseLeave={scheduleClose}
                onClose={() => setActiveItem(null)} />
            )}
          </li>
        ))}
      </ul>
    </nav>
  );
}

メガパネルのレイアウト（列＋注目商品＋バナー）：

function MegaPanel({ id, panel, onMouseEnter, onMouseLeave, onClose }) {
  return (
    <div id={id} className="mega-panel" role="region"
         onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
      <div className="mega-panel-inner">
        <div className="mega-columns">
          {panel.columns.map(col => (
            <div key={col.heading} className="mega-column">
              <p className="column-heading">{col.heading}</p>
              <ul>
                {col.links.map(link => (
                  <li key={link.url}><a href={link.url} onClick={onClose}>{link.label}</a></li>
                ))}
              </ul>
            </div>
          ))}
        </div>
        {panel.banner && (
          <a href={panel.banner.url} className="mega-banner" onClick={onClose}>
            <img src={panel.banner.image} alt={panel.banner.alt} loading="lazy" />
            <span className="banner-cta">{panel.banner.cta}</span>
          </a>
        )}
      </div>
    </div>
  );
}

.mega-panel {
  position: absolute; top: 100%; left: 0; width: 100vw;
  background: #fff; border-top: 2px solid #e2e8f0;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12); z-index: 100;
}
.mega-panel-inner {
  display: grid; grid-template-columns: 1fr 1fr 1fr 200px;
  gap: 2rem; max-width: 1200px; margin: 0 auto; padding: 2rem;
}
@media (max-width: 768px) { .mega-panel { display: none; } }

ステップ 3：モバイル用ハンバーガードロワーを設定する

すべてのプラットフォームで、デスクトップのメガメニューに代わる、タッチ操作に適したモバイルナビゲーションが必要です。

• Shopify： 最新の OS2.0 テーマにはモバイルドロワーが組み込まれています。Online Store → Themes → Customize → Mobile Menu で設定します
• WooCommerce： Max Mega Menu にはメガメニューをアコーディオンドロワーに変換するモバイルモードが組み込まれています。外観 → Max Mega Menu → Mobile Menu で設定します
• BigCommerce： Cornerstone にはモバイルナビゲーションドロワーが組み込まれています。Theme Editor でハンバーガーボタンの位置を設定します
• カスタム： アコーディオン形式でカテゴリを展開できる <dialog> または position:fixed のサイドドロワーを作成します。開いている間は <body> に overflow:hidden を適用します

ベストプラクティス

• メニューの内容は CMS／管理画面から管理します — マーチャンダイザーがエンジニアの助けを借りずにバナーや注目商品を更新できるようにします
• 閉じるまでの遅延を 150 ms に設定します — カーソルがパネルへ移動する際に、一瞬ナビゲーションから外れてもパネルが消えないようにします
• ナビゲーションバーに position:absolute を指定してパネルを配置します — 個々のリスト項目ではなく、ビューポート全体の幅にパネルが広がるようにします
• パネルの画像を遅延読み込みします — 注目商品やバナーの画像はファーストビューの外にあるため、loading="lazy" を指定します
• タッチデバイスでテストします — iOS／Android ではホバーイベントが発生しません。メガメニューアプリやプラグインではこの点に対応しています。カスタム実装では、タッチ操作時にトップレベル項目をタップして開くようにします

よくある問題

問題	解決策
ナビゲーション項目からパネルへ斜めにカーソルを移動すると、パネルが閉じる	閉じる前に 150–200 ms の setTimeout 遅延を設け、カーソルがパネルに入ったらキャンセルします
キーボード操作のユーザーがパネル内のリンクに移動できない	aria-haspopup と aria-expanded を使用し、Enter／Space／ArrowDown キーでパネルにフォーカスを移動します
モバイルドロワーの背後で body がスクロールする	ドロワーが開いている間は <body> に overflow:hidden を適用し、閉じたときに元に戻します
バナー画像によってレイアウトがずれる	バナーの <img> 要素に明示的な width 属性と height 属性を設定します
スクロール時にナビゲーションが固定コンテンツに重なる	ナビゲーションに position:sticky; top:0; z-index:50 を設定し、メガパネルには z-index:100 を指定します

Related Skills

• @responsive-storefront
• @accessibility-commerce
• @product-categorization
• @storefront-theming