メガメニュー

Mega menu

ナビゲーションの1項目をホバーまたはクリックすると、複数カラムにまたがる大面積のパネルとして多数のリンクを一度に展開するメニューUI。

○ 使う場面

  • カテゴリ数・サブカテゴリ数が多いECサイトで、複数階層を1回のホバー/クリックで見渡させたいとき
  • 画像やおすすめ商品などリッチなコンテンツをナビゲーション内に埋め込みたいとき

× 避ける場面

  • サブ項目が少なく通常のドロップダウンメニューで十分なとき
  • モバイル幅で表示領域が確保できないとき(→ドロワーメニューに切り替え)

別名

マルチカラムメニュー、フルワイドメニュー

近縁種との比較

「メガメニュー」の「メガ」は「巨大な」を意味する接頭辞で、通常のドロップダウンメニューを縦一列ではなく複数カラムに大きく展開し、画像やおすすめ商品まで一度に見せる規模の大きさを、そのまま名前に反映したものとされる。

近縁種違い・使い分け
ドロップダウンメニューメガメニューは複数カラムにまたがる大面積のパネルを展開し画像やおすすめ商品などリッチなコンテンツも埋め込めるのに対し、ドロップダウンメニューは直下に縦一列の選択肢を展開するだけの単純なリンク列である。
ドロワーメニュー画面幅が確保できないモバイル環境では、メガメニューをそのままではなくドロワーメニュー(画面端からスライドするパネル)に置き換えるのが定石で、両者は同じ「隠れたナビゲーションを開く」役割をレスポンシブに応じて使い分けるペアとして扱われることが多い。

分類

機能・役割
  • ナビゲーション
  • 入力・操作
  • 表示・整理
  • フィードバック・状態
表示レイヤー
  • インライン
  • 固定・追従
  • オーバーレイ
  • 全画面・遷移
複雑さ
  • 単体パーツ
  • 複合パーツ
  • セクション