HOME > HEADER

HEADER

header_001

左にロゴ、右にメニューの基本的なレイアウトに、お問い合わせと申込みの2つのフォームへのリンクを合わせたパターン

 
more demo

header_002

左にロゴ、中央にメニュー、右にソーシャルアイコンの3段レイアウト。パソコン・スマホ共通のブロックで中央のメニューがハンバーガーメニューに入ります。

 
more demo

header_003

左にロゴ、右に電話番号の表示、お問い合わせフォームへのリンクとして、メニューはその下に別のブロックとして作成するパターン。スマホでは電話とフォームがアイコンで表示されるようにちょっと細工してあります。

 
more demo

header_004

online storeへのリンクを右に独立して表示するために3分割したブロックにして、中央にはメニューを配置しています。スマホでは別ブロックとしてメニューの中にonline storeを入れています。

 
more demo

header_005


メニューをSiGNで作った画像で作成したパターン。
 
more  demo

header_006

背景に指定した画像に載せるメニューブロックと、スクロール時に表示されるゴーストヘッダーの組み合わせ。スマホでは画像のレイアウトも変わるため、別のブロックでスマホ用のヘッダーを作っています。

 
more demo

header_007

ビルボード部に大きくレイアウトする画像の下にメニューのブロックを配置したレイアウト。スクロール時にはページの上部に固定されます。

 
more demo

header_008

ヘッダー右側に電話番号や営業時間、住所などの表示を入れたい時に使えるレイアウト。メニューはブロックを別にして中央揃えで並べています。

 
more demo

header_009

モーションメニュー「バルーン」でメニューを作ったパターン。メニューを線で囲い、マウスオーバーで色が変わる設定はDRESSで設定しています。

 
more demo