メガメニュー付きヘッダー
ホバーで多列メガメニューが展開するデスクトップ向けナビゲーション。
使いどころ
ホバーで多列メガメニューが展開するデスクトップ向けナビゲーション。
- コーポレートサイトのグローバルナビ
- SaaS の管理画面ヘッダー
- EC サイト・LP のトップナビゲーション
- オウンドメディアのヘッダー
カスタマイズのポイント
ロゴテキストを差し替えて、ナビ項目の文字色とリンク先を変更すればすぐ使えます。スマホでハンバーガー化したい場合は @media (max-width: 720px) ブレークポイントを基準に表示制御してください。
注意点
ヘッダーは position: sticky や fixed で固定する場合、本文に padding-top を足してコンテンツが隠れないように。z-index も併せて指定するとモーダル・ドロップダウンとの重なり順を制御できます。
よくある質問
このパーツは商用利用できますか？
はい。moatway がオリジナル制作したパーツは商用・個人問わず自由にご利用いただけます。
そのまま貼り付ければ動きますか？
はい。HTML / CSS タブをそれぞれコピーすればすぐ動作します。クラス名が既存サイトと衝突する場合はリネームしてください。
JavaScript が必要なパーツはありますか？
一部のパーツ（アコーディオン・タブ切替・告知バーの閉じる機能など）は JavaScript が必要です。詳細ページの JS タブで確認できます。
ブラウザ対応は？
最新 2 世代の Chrome / Safari / Firefox / Edge で動作確認しています。