メガメニュー付きヘッダー
このパーツは、ナビ項目にホバーすると多列のパネルが開く メガメニュー付きヘッダー です。「サービス」などの親項目に position:relative を、展開パネルに position:absolute を組み合わせ、複数の <strong> 見出しとリンク列を横並びで一度に見せます。
このパーツの使いどころと実装ポイント
このパーツは、ナビ項目にホバーすると多列のパネルが開くメガメニュー付きヘッダーです。「サービス」などの親項目に position:relative を、展開パネルに position:absolute を組み合わせ、複数の <strong> 見出しとリンク列を横並びで一度に見せます。項目数の多いサイトでも、階層を深く潜らせず1段で全体像を提示できます。
向いている場面
サービスや商品カテゴリが多い制作会社・メーカー・EC、部門ごとにメニューが分かれる企業サイト・大学、コンテンツの種類が多いメディアに向きます。深い階層を辿らせず、ホバー一発で行き先の全体を見渡せます。
カスタマイズと注意点
- 列（
mhdr__col）の数や見出しを足すだけでメニュー構成を拡張できます - 展開パネルが他要素に隠れないよう、ヘッダーの
z-indexを高く保ちます
ホバー前提のため、タッチ端末では開けないことがあります。スマホ向けにはクリックで開くハンバーガーメニューを別途用意するのが安全です。各リンクは具体的なラベルにし、キーボード操作でもたどれるようにしておきましょう。
よくある質問
スマートフォンでもメガメニューは使えますか？
このパーツはホバーで開くデスクトップ向けの作りのため、タッチ操作中心のスマホでは開きにくくなります。モバイルではクリックで開閉するハンバーガーメニューを別途用意し、画面幅で切り替えるのが一般的です。
メニューの列や項目数は自由に増やせますか？
増やせます。展開パネル内の列（mhdr__col）を追加し、見出しのstrongとリンクを並べるだけです。ただし列が増えすぎると横幅をはみ出すことがあるので、パネルの最大幅と画面端からの収まりを確認してください。