メガメニュー（カテゴリホバー展開）
メニュー項目にマウスを乗せると、横幅いっぱいのパネルが下に展開するメガメニューです。展開部は position: absolute でヘッダーの下に重ね、複数のカテゴリを grid-template-columns: repeat(3,1fr) で 3 列に並べて一覧表示します。
解説
メニュー項目にマウスを乗せると、横幅いっぱいのパネルが下に展開するメガメニューです。展開部は position: absolute でヘッダーの下に重ね、複数のカテゴリを grid-template-columns: repeat(3,1fr) で 3 列に並べて一覧表示します。表示の切り替えは CSS だけで、通常は opacity:0; pointer-events:none で隠し、親項目の :hover で表示しつつ translateY をわずかに動かして、すっと降りてくるアニメーションを付けています。
使いどころ
- カテゴリ数が多い EC サイトの、商品ジャンルを一気に見せたいナビ
- サービスや製品ラインが多い企業サイトのグローバルナビ
- メニューを階層化せず、1 階層で全体像を見せたい大型サイト
列数はグリッドの repeat(3,1fr) を変えれば増減でき、項目は HTML の ulli を編集します。注意点として、ホバー前提の展開はタッチ端末で扱いにくい ため、スマホではタップで開閉するアコーディオン型に切り替えるのが定番です。パネルが広いので、キーボード操作やスクリーンリーダーでもたどれるよう、見出しと項目の構造を整理しておくと使いやすくなります。色や余白はパネルの background とパディングで調整します。
使用例・適したシーン
- コーポレートサイトのグローバルナビ
- EC サイトのヘッダー
- SaaS の管理画面
- モバイル向け Web アプリ
よくある質問
展開パネルの列数を変えられますか？
CSS の .nav-mm__panel にある grid-template-columns: repeat(3,1fr) の 3 を変えれば列数を増減できます。カテゴリの中身は HTML の strong 見出しと ul・li を追加・削除して調整します。パネルの横幅はヘッダーに対して left:0; right:0 で広げているため、列を増やしても全幅に収まります。
スマホでも同じように使えますか？
このメニューはホバーで開く設計のため、タップ操作が中心のスマホには不向きです。モバイルでは、タップで開閉するアコーディオン型や、項目を縦に並べる別ナビへ切り替えるのが定番です。メディアクエリで画面幅に応じて表示方法を出し分けるとよいでしょう。