メガメニュー（画像カード付き）
このメガメニューは、グローバルナビの項目にホバーすると画面幅いっぱいのパネルが開き、画像カードでカテゴリを視覚的に案内するナビゲーション UI です。動作は CSS だけで完結しており、JS は不要です。
解説
このメガメニューは、グローバルナビの項目にホバーすると画面幅いっぱいのパネルが開き、画像カードでカテゴリを視覚的に案内するナビゲーション UI です。動作は CSS だけで完結しており、JS は不要です。パネル .mm-panel は通常 opacity:0 と pointer-events:none で隠れ、.mm-item:hover 時に表示・操作可能になり、transform:translateY で軽く下からスライドして現れます。
レイアウトの要点
パネルは grid-template-columns:repeat(4,1fr) の 4 列で、各カードはサムネイル・見出し・補足テキストで構成されます。親項目を position:static に、パネルを absolute にすることで、バーの幅に合わせて横いっぱいに広げています。
- EC サイトの商品カテゴリ一覧をビジュアルで見せる
- 大型コーポレートサイトの事業・サービス案内
- メディアサイトの特集カテゴリ導線
ホバー前提のため、タッチ端末ではクリックで開閉する JS を足すと操作性が安定します。デモのカード画像はグラデーションのプレースホルダなので、実案件では実写へ差し替えてください。色は #667eea 系のアクセントを変えるだけでサイトのトーンに馴染ませられます。
よくある質問
JavaScript なしで動きますか。
はい。開閉は :hover と CSS の transition だけで実装しているため JavaScript は不要です。ただしタッチ端末ではホバーが効かないため、必要ならクリックで開く処理を追加してください。
カードの画像を本物の写真に差し替えられますか。
できます。デモは確認用にグラデーションを背景にしていますが、mm-card__img の背景を実写の画像 URL に変えるだけで実サイト向けになります。縦横比は 4 対 3 で揃えています。