iPhoneで下の要素がスクロールされないレスポンシブ対応のヘッダーメニュー

新しいヘッダーが完成しました。
レスポンシブデザインを採用しているため、PCの大きなモニターにも、スマートフォンの小さなスクリーンにも対応します。

iPhoneでドロワーの下にある要素がスクロールしない

主な特徴として、iOS特有の重ねた要素をスクロールさせると下の要素が反応してしまう症状を解決しています。絶対にスクロールが乱れずレイアウトも崩れない…と思います。

デスクトップ用のデザイン

ドロップダウンメニューを利用できます。ドロップダウンはメガメニューにもなります。メニューのリンクはマウスホバーにもクリックにも対応しているため実用性も高くなっています。

モバイル用のデザイン

ハンバーガーメニューだけのシンプルなデザインです。ロゴとボタンは少しスクロールすると隠れて、少し下にスクロールするとまたロゴとボタンが現れます。

ドロワーのデザイン

左サイドからスルッとアニメーションして開きます。
メニューを開くと高さが自動的に変わりますがスクロールも崩れません。

実際の動きを確認するには当社のホームページをご覧ください。

http://navymobile.co.jp

ホームページ制作でこのメニューを採用していただくこともできます。
詳しくはお問い合わせください。