メガドロップダウン付きヘッダー

このパーツの使いどころと実装ポイント

このヘッダーは、ナビ項目にカーソルを合わせると画面幅いっぱいに近い大きなパネル（メガドロップダウン）が開く構成です。製品メニューの中を「カテゴリ A／B／C」の複数列に分け、各列に小見出し h4 とリンク群を並べることで、多数の項目を一望できるようにしています。レイアウトはロゴとナビを display:flex で横並びにし、パネル側は親項目に position で重ねて表示する作りです。

向いている場面

• 取扱カテゴリが多い EC サイトのグローバルナビ
• 製品ラインや機能が多い大規模 SaaS のヘッダー
• 部門・サービスが枝分かれするコーポレートサイト

カスタマイズと注意点

列の数や1列あたりのリンク数は中身に合わせて増減できます。列ごとに見出しを付けておくと情報のまとまりが伝わりやすくなります。実装上の注意は2点。第一に、ホバーだけで開く設計はタッチ端末で操作できないため、スマホでは項目をタップで開閉するアコーディオン型に切り替えてください。第二に、開閉をキーボードでも辿れるよう、リンクへ Tab で到達でき、フォーカスが当たった項目のパネルが開くようにしておくとアクセシビリティが保てます。パネルが画面外にはみ出さないよう、左端寄せか中央寄せの位置調整も忘れずに行います。