メガメニュー ヘッダー
メガメニュー ヘッダーは、グローバルナビの一項目に カーソルを合わせると複数列のサブメニュー が一気に展開するヘッダーです。このサンプルでは「サービス」配下を「Webサイト制作」「マーケティング」「システム開発」の三列に分け、各列に小見出しとリンクをまとめています。
このパーツの使いどころと実装ポイント
メガメニュー ヘッダーは、グローバルナビの一項目にカーソルを合わせると複数列のサブメニューが一気に展開するヘッダーです。このサンプルでは「サービス」配下を「Webサイト制作」「マーケティング」「システム開発」の三列に分け、各列に小見出しとリンクをまとめています。モバイルではJavaScriptでハンバーガーに切り替わり、aria-expandedで開閉状態を伝えています。
向いている場面
提供サービスやカテゴリが多い企業サイト、ECや複数事業を持つ会社に向きます。階層が深くなりがちなナビを、ワンアクションで俯瞰させたい場面に適しています。
カスタマイズと注意点
メガメニューの列はulを増減して調整でき、小見出し（h3）でグループを分かりやすくできます。項目が多すぎると逆に選びにくくなるため、列ごとの数は揃えると整然と見えます。アクセシビリティ面では、開閉トリガをbuttonにし、キーボード操作とフォーカス移動を確保することが重要です。ホバー展開はタッチ端末で効かないため、モバイルではクリック開閉に切り替える設計を保ってください。
このパーツは JavaScript が含まれます。HTML の最後に <script> タグで読み込むか、外部 JS ファイルに切り出してください。
よくある質問
メガメニューは項目が多いサイトでないと使えませんか
必須ではありませんが、サービスやカテゴリが多く階層が深いサイトほど効果を発揮します。リンクが少ない場合は通常のドロップダウンの方が軽快で、メガメニューは過剰になることがあります。
スマホではホバーが効きませんが大丈夫ですか
問題ありません。このサンプルはモバイル幅でハンバーガーボタンに切り替わり、タップで開閉する仕組みです。ホバー展開はマウス操作のPC向け、タップ開閉はタッチ端末向けと役割を分けています。