初心者のためのWEBデザイナーの教科書

レスポンシブメニュー実装

ハンバーガーメニュー

【超簡単!】コードコピペで完成。3>
トグルボタン(ハンバーガーボタン)が完成できたら、いよいよレスポンシブメニューを構築していきます。まずは、下記のUI仕様を事前に確認します。

横幅が狭いスマホ画面の場合、ナビメニューが4つ以上あると、横へ並べることが困難になることが予測されます。そこで、メニューを縦へ集約し一旦非表示にします。トグルボタンを配置し、クリックすることで非表示にしたメニューが出現する仕様を考えます。また、パソコンモニターの場合は、幅広ですので、十分にメニューを横へ配置することが可能となり、トグルボタンは不要のため、非表示にさせる仕様になります。

作成のコツは、モバイルファーストです。まずは、スマートフォン仕様を構築し、メニューを画面から外へ押し出してみましょう。コーディングサンプルを図解で解説しています。

See the Pen
xxbYpEN
by nakatax (@cocohp)
on CodePen.


●HTMLコード

●CSSコード

●jsの記述

仕上がりサンプル

See the Pen
xxbYpEN
by nakatax (@cocohp)
on CodePen.


【補足】ベンダープレフィックス
最新版のブラウザだけを、対象にする場合は、全く考慮する必要はありませんが、
CSS3をサポートしていない古いバージョンのブラウザを考慮する場合、

-webkit- Google Chrome, Sfari用
-moz- Firefox用

など、各ブラウザ専用のベンダープレフィックスが必要になります。
記述の仕方は、セレクターの先頭に記述を追加して記述するだけです。
【例】-webkit-transform: translateX(0);
対応しているブラウザのバージョンをチェック
https://caniuse.com/