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

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

これは、グローバルナビの項目にカーソルを合わせると大型パネルが開くメガドロップダウン型のヘッダーです。親項目を position:relative、パネルを position:absolute で配置し、:hover で display:none から display:grid に切り替えることで、複数のサブリンクを 2 列のグリッドにまとめて表示します。

向いている場面

製品ラインや機能が多い SaaS、取り扱いカテゴリが豊富な EC、サービスが複数あるコーポレートサイトなど、トップ階層に収まりきらないメニューを整理したいサイトに向きます。1 クリック分の階層を減らせるのが利点です。

カスタマイズと注意

• パネル内をカテゴリ見出し＋リンク群に分けると情報が探しやすくなります
• grid-template-columns の列数を増やせば、より大きなメニューにも対応できます
• ホバー（マウス操作）前提のため、タッチ端末やキーボード操作では開けません。実運用ではクリックやフォーカスでも開くよう :focus-within や JavaScript を併用してください
• パネルが画面右端で見切れないよう、右寄せ項目では left ではなく right 基準にすると安全です

装飾の「▾」は記号文字なので、読み上げに不要なら aria-hidden を付けると親切です。