メガメニュー
Mega menu
別名: マルチカラムメニュー、フルワイドメニュー、Multi-column menu、Mega dropdown
生態（さわってみる）
一言定義
ナビゲーションの1項目をホバーまたはクリックすると、複数カラムにまたがる大面積のパネルとして多数のリンクを一度に展開するメニューUI。
分類
使う場面
- カテゴリ数・サブカテゴリ数が多いECサイトで、複数階層を1回のホバー/クリックで見渡させたいとき
- 画像やおすすめ商品などリッチなコンテンツをナビゲーション内に埋め込みたいとき
避ける場面
- サブ項目が少なく通常のドロップダウンメニューで十分なとき
- モバイル幅で表示領域が確保できないとき（→ドロワーメニューに切り替え）
近縁種との比較
メガメニューはナビゲーションの1項目をホバーまたはクリックすると、複数カラムにまたがる大面積の パネルを展開する点で、直下に縦一列の選択肢を展開するだけのドロップダウンメニューと区別される。 画像やおすすめ商品などリッチなコンテンツを埋め込めるのも、単純なリンク列であるドロップダウンメニ ューとの違いである。画面幅が確保できないモバイル環境では、メガメニューをそのまま使わずドロワー メニュー（画面端からスライドするパネル）に置き換えるのが定石で、両者は同じ「隠れたナビゲーショ ンを開く」役割をレスポンシブに応じて使い分けるペアとして扱われることが多い。
実例リンク
アクセシビリティ
- role
- トリガーはbutton[aria-haspopup="true"][aria-expanded]、展開パネルはrole="menu"ではなく通常のnav+リンク群として実装するのが一般的（role="menu"は本来アプリケーションのコマンドメニュー向けで、厳密なキーボード操作を要求しすぎるためNN/gも通常のリンク集合としての実装を推奨）
- キーボード操作
- Enter/Space/ホバーで開く、開いた状態でTabによりパネル内リンクへ、Escで閉じてトリガーへフォーカスを戻す
- 補足
- ホバーのみで開閉するとキーボード・タッチユーザーが操作できないため、ホバーとクリック/フォーカスの両方で開けるようにし、マウスがパネル外へ出てから閉じるまで短い遅延を設けて誤操作を防ぐ