3 カラム メガメニュー

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

上部のナビゲーションバーの下に、3つのカテゴリを横並びで広げるメガメニューです。バー部分にはロゴと主要メニューを置き、その下のパネルをdisplay:gridの3列で組み、「Web制作」「運用支援」「マーケティング」のように見出しごとにリンクをまとめています。情報量の多いサイトでも、関連リンクをカテゴリ単位でまとめて一度に見せられるのが利点です。

向いている場面

サービスや商品カテゴリが多いECサイト、記事ジャンルが幅広いメディア、事業領域が複数ある制作・コンサル会社のコーポレートサイトなどに向きます。1階層のメニューに入りきらないリンクを整理して見せたいときに役立ちます。

カスタマイズと注意点

• 列を増やしたいときはgrid-template-columns:repeat(3,1fr)の数字を4などに変えます。各列は見出しh4とリンク群のセットなので、まとめてコピーすれば追加できます。
• このパーツはパネルを常に開いた状態で見せています。実運用では、メニューにマウスを乗せたときだけ開くようJavaScriptの開閉処理を足すのが一般的です。
• 画面幅720px以下では3列が1列に切り替わります。スマホでは横並びのメガメニューより、タップで開く折りたたみメニューに置き換える設計も検討してください。