メガメニュー（フェード表示）

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

このパーツは、ナビ項目にマウスを重ねると大きなパネルがふわっとフェードインするメガメニュー型のヘッダーです。パネルは position:absolute で項目の真下に配置し、初期状態は opacity:0・visibility:hidden・transform:translateY(8px) で隠しておきます。親項目の :hover で opacity:1・visibility:visible・translateY(0) へ transition し、わずかに上へ持ち上がりながら滑らかに表示される仕組みです。パネル内のリンクは display:grid の 2 カラムで整列し、複数の子項目を一覧で見せられます。JavaScript を使わず CSS だけで開閉します。

向いている場面

事業領域や製品ラインが多い企業サイト、サービスを階層で整理したいコーポレートサイト、情報設計（IA）が深いサイトの上位ナビに向きます。1 つの親項目の下に多数の子ページをまとめて見せられるため、深い階層を浅く感じさせられます。

カスタマイズの勘所

• パネル内の列数は grid-template-columns:repeat(2,1fr) の数字で増減でき、子項目が多ければ 3 列にすると収まりが良くなります。最小幅は min-width で調整します。

注意点として、ホバー開閉はタッチ端末やキーボード操作では扱いにくいため、スマートフォン向けにはタップで開くアコーディオン型の別ナビを用意するのが一般的です。アクセシビリティを高めるなら :focus-within でのキーボード対応も検討してください。