CSSのみでハンバーガーメニューを作ってみよう

こんにちわ、今年の初さんまが5,000円と聞いて絶望の淵にいるゆずのすけです。
さんまが高級魚になってしまうなんて、悲しすぎますね…。

今回は、WEB制作やWEBサイトでレスポンシブデザインをする際の定番ハンバーガーメニューの作り方をご紹介します。

ハンバーガーメニューとは、スマホサイズでメニューを表示すると表示領域が小さくなってしまうため、ハンバーガーみたいなアイコンをクリックした時のみ、メニューを表示させる機能になります。

よく使われる技術になるので、作り方をしっかり頭にいれておきましょう。
今回は動作も軽いのでCSSのみで作っていきます。

ハンバーガーメニューのコード

まずは、聞くよりも見てみましょう。

See the Pen
gOrgjpM by yuzunosk (@yuzunosk)
on CodePen.

こちらのコードは、ハンバーガーの絵文字をクリックすると、メニューがスライドするようになっています。
そして、×マークまたは、画面の黒い部分をクリックする事で、メニューが消えるようになっています。

本来は、画面が小さい時だけハンバーガーが表示されるのですが、codepenのウインドウが小さい為、常に表示されてしまっています。

今回はこのような動きをするハンバーガーメニューの作成をしていきます。

HTML部分の解説

まずは、HTML部分の説明です。
ハンバーガー絵文字をクリックした際に呼び出されるのが、コメントアウトしている<!– sidemenu –>から下になります。

最初に隠れている部分ですね。
ここの記述はなんでもいいのですが、大事なのは

この部分になってきます。

これらは全て連動していてどれをクリックしても<input type=”checkbox”>のチェックがon・offされるようになっています。

それは、<label>タグで繋いでいるからです。
<input>タグのidと<label>タグのforを同じにする事で、この挙動にする事ができます。

では実際に確認してみましょう。次のコードはハンバーガーをクリックしても、×マークをクリックしても、チェックのon・offができますね。

See the Pen
YzqZKgo by yuzunosk (@yuzunosk)
on CodePen.

CSS部分の解説

CSSでは、まず最初に隠しておくモノと表示するモノを分けて作りましょう。

まず、ハンバーガーの絵文字を持たせている .open、.closeは画面が小さい時のみ表示したいため、display:noneで見えなくしておきます。

横からスライドしてくるsidemenuも最初は隠しておきたいので、画面外へと配置しておきます。

それを実現するのが、positionプロパティになります。

positionは、指定した要素の配置方法を決められるプロパティです。
色々と指定の方法はあるのですが、今回はabsolute(アブソリュート)という方法で指定しています。

absoluteで指定する時、デフォルトのままだと画面の一番左上が配置を決める起点となります。

例えば…top: 0px;というのは、左上からtopが0px離れているという意味になります。
この場合だと、数値は0なので、まったく離れずぴったりくっついているという状態ですね。

そして、left: -250px;というのは、topはぴったりくっついたまま起点から、-250px分左にあるという事ですね。
例えば、この値を250pxとかにすると起点から250px離れているという事なので、右側に250px分要素がずれていきます。

この辺りは、聞くよりも自身で数値を色々弄ってみると理解しやすいので、やってみてください。

次に、チェックボックスです。こちらも見えていると不格好なので隠してしまいましょう。

vwという単位を使っていますが、この単位はレスポンシブに対応しており最近よく使われます。
vhがviewpointの高さに基づいた単位、vwがviewpointの幅に基づいた単位です。
ブラウザの大きさが変わる度に数値が変わる指定方法になるので、とても便利です。

メディアクエリ

コードに @media screen and (max-width: 1000px;) と書かれていますが、こちらはレスポンシブ対応といって、様々な機器での閲覧に合わせてCSSを設定する機能になります。

この記述の場合、画面のサイズが1000px以下の時のCSSを書いていくという意味になります。

まず画面が小さい時には.openと.closeを見える状態にしたいので

として、画面のサイズが1000px以下の時に表示するようにしておきます。

これで、画面が小さい時はハンバーガーの絵文字が表示されるようになります。

そして、画面が1000px以下の時にチェックボックスがonになると

.sidemenuのpositionが0pxになるようにしておきます。
こうする事で、ハンバーガーをクリックするとサイドメニューが左から出てくるように設定できます。

transitionプロパティは、動作をするのに何秒かかるのかを設定する事ができます。
今回の場合、0.2秒で設定しています。

transitionはアニメーションさせる時にもちいるプロパティで、指定することで一瞬で動作が完了せずにその過程も描かれるようになります。

そのおかげで、ゆっくり動いているように見えるわけですね。
今回の場合、サッと左から出てくるような挙動になっています。

最後に.returnの説明です。

こちらは、チェックボックスがonになった際に薄暗いスクリーンをだす挙動になっています。
実は、position: absoluteを使うことでレイヤーが１枚上の状態になるのですが、その効果を利用して幅100%高さ100%の黒い画面を表示しています。

真っ黒だと目に刺激が強いので、opacityで少し透明度を付けています。
こちらもtransitionプロパティで動作の完了まで0.2秒かかるように設定しています。

まとめ

いかがだったでしょうか？
今回は、説明がかなり長くなってしまったのですが、もし分からないプロパティがあればぜひ調べてみてください。
値を変えて実際に自分で動作の確認をするとより理解しやすくなりますよ。
CSSのみでハンバーガーメニューを作ると、読み込みも動作も軽くなるのでぜひ挑戦してみてください。
この記事があなたの役に立ったなら嬉しいです。