デモサイト https://wsp-demo03.hp1.work/ で実物をご覧いただけます。

グローバルナビの仕様について

このページで説明されているサイトヘッダーをお使いになる場合、下記の範囲内でグローバルナビのメニューを作成していただくようお願いいたします。

  • メニューの数は最大5つまで
  • メニューの項目の文字数は最大6文字まで

この範囲を超えるとレイアウトがくずれる可能性があります。ご了承ください。

上記は最上位のメニューについての制約事項です。サブメニューにはこの制約はありません。

  • ヘッダーの背景色にキーカラーを設定してあります。
    ※キーカラーの背景色に合うヘッダーロゴ画像をご用意いただく必要があります。
  • アイコンを表示することができます。
    使用できるアイコンは Font Awesome です。

ページ先頭を表示しているとき

キーカラー #4b0082

ページ先頭を表示しているとき

サブメニューを開いた状態

サブメニューの背景色はキーカラーを濃くしたものが自動的に設定されます。

サブメニューを開いた状態

スクロール時

スクロール時にもヘッダーロゴ画像が表示されます。

キーカラー #1e73be

スクロール時

バリエーション

すべてのメニュー項目にアイコンをつけないシンプルなデザインにもできます。

キーカラー #288c66

ページ先頭を表示しているとき
ページ先頭を表示しているとき
サブメニューを開いた状態
サブメニューを開いた状態