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

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

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

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

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

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

  • ヘッダーに検索窓を設置してあります。
  • ヘッダーの背景色にキーカラーをうすく透過した設定をしてあります。
  • アイコンを表示する前提のデザインです。使用できるアイコンは Font Awesome です。
  • 検索ボタンとアイコンの色はカスタムカラーですので、お客様側で変更可能です。
     検索ボタン:キーカラー
     メニュー1つめ:カスタムカラー 1
     メニュー2つめ:カスタムカラー 2
     メニュー3つめ:カスタムカラー 3
     メニュー4つめ:カスタムカラー 4
  • マウスホバーでアイコンが回転します。

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

キーカラー #f23d91
カスタムカラー 1 #b8d41c カスタムカラー 2 #1cd437 カスタムカラー 3 #1cb8d4 カスタムカラー 4 #371cd4

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

検索窓を開いた状態

検索窓の背景色はキーカラーを濃くしたものが設定されています。

検索窓を開いた状態

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

サブメニューの背景色はキーカラーが設定されています。

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

スクロール時

スクロール時も検索窓を使うことができます。

スクロール時