メガメニューとは

メニューの項目にホバーまたはクリックすると、複数列のリンクをまとめた幅広いパネルが開くナビゲーション。

概要

グローバルナビゲーションの項目にマウスを重ねる（ホバー）か、クリック・タップすると、画面の横幅いっぱいに近い大きなパネルが開く仕組みです。パネルの中はカテゴリごとに列（カラム）を分けて並べるのが一般的で、商品数の多い EC サイトや、扱うサービスの種類が多い企業サイトでよく使われます。

別名

表記ゆれ：メガメニュー、メガドロップダウン、mega menu、mega dropdown

呼び方の揺れは少なく、「メガメニュー」がほぼそのまま定着しています。

AI への伝え方

「メガメニューを実装して」で通じます。列の数（何カラムにするか）と、開くきっかけを「ホバー」にするか「クリック」にするかを伝えると仕様がぶれません。スマホでは表示しきれないため、ドロワーメニューなど別の形式に切り替える想定かどうかも伝えておくと安心です。

似たパーツとの違い

「ドロップダウンメニュー」は 1 列のシンプルな一覧が開く形式で、メガメニューは複数列にまたがる大きなパネルが開く点が異なります。メガメニューはあくまで「グローバルナビゲーション」の項目の 1 つが開いた状態であり、ナビゲーション全体を指す言葉ではありません。

デモ

コード

HTML

<nav class="mega-menu-demo" aria-label="サンプルメニュー">
  <div class="mega-menu-demo__item">
    <button
      class="mega-menu-demo__trigger"
      type="button"
      aria-expanded="false"
      aria-controls="mega-menu-demo-panel"
    >
      サービス
    </button>
    <div class="mega-menu-demo__panel" id="mega-menu-demo-panel">
      <div class="mega-menu-demo__column">
        <h3>Web制作</h3>
        <ul>
          <li><a href="#">コーポレートサイト</a></li>
          <li><a href="#">EC サイト</a></li>
          <li><a href="#">LP 制作</a></li>
        </ul>
      </div>
      <div class="mega-menu-demo__column">
        <h3>マーケティング</h3>
        <ul>
          <li><a href="#">SEO 対策</a></li>
          <li><a href="#">広告運用</a></li>
          <li><a href="#">SNS 運用</a></li>
        </ul>
      </div>
      <div class="mega-menu-demo__column">
        <h3>サポート</h3>
        <ul>
          <li><a href="#">保守運用</a></li>
          <li><a href="#">お問い合わせ</a></li>
          <li><a href="#">資料請求</a></li>
        </ul>
      </div>
    </div>
  </div>
</nav>

CSS

.mega-menu-demo {
  font-family: sans-serif;
}

.mega-menu-demo__item {
  position: relative;
  display: inline-block;
}

.mega-menu-demo__trigger {
  padding: 10px 16px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
  font-size: 14px;
  cursor: pointer;
}

.mega-menu-demo__trigger:hover {
  background: #f2f2f2;
}

.mega-menu-demo__panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  display: none;
  gap: 24px;
  width: 420px;
  max-width: 80vw;
  padding: 20px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
  z-index: 10;
}

.mega-menu-demo__item:hover .mega-menu-demo__panel,
.mega-menu-demo__item:focus-within .mega-menu-demo__panel,
.mega-menu-demo__trigger[aria-expanded="true"] + .mega-menu-demo__panel {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.mega-menu-demo__column h3 {
  margin: 0 0 8px;
  font-size: 13px;
  color: #666666;
}

.mega-menu-demo__column ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mega-menu-demo__column a {
  display: block;
  padding: 6px 4px;
  color: #212121;
  text-decoration: none;
  font-size: 14px;
  border-radius: 6px;
}

.mega-menu-demo__column a:hover {
  background: #f2f2f2;
  color: #0017c1;
}

document.querySelectorAll(".mega-menu-demo__trigger").forEach((trigger) => {
  trigger.addEventListener("click", () => {
    const isOpen = trigger.getAttribute("aria-expanded") === "true";
    trigger.setAttribute("aria-expanded", String(!isOpen));
  });
});

document.addEventListener("click", (event) => {
  document.querySelectorAll(".mega-menu-demo__item").forEach((item) => {
    if (!item.contains(event.target)) {
      item.querySelector(".mega-menu-demo__trigger")?.setAttribute("aria-expanded", "false");
    }
  });
});

document.addEventListener("keydown", (event) => {
  if (event.key === "Escape") {
    document.querySelectorAll(".mega-menu-demo__trigger").forEach((trigger) => {
      trigger.setAttribute("aria-expanded", "false");
    });
  }
});