ハンバーガーメニュー【初心者向け】簡単なパターンを2つ紹介

HTML/CSSを学習の初期の段階で、最初のハードルの1つがハンバーガメニューだと思います。

普段はコピペするだけですが、多少のアレンジをしようとすると意外と苦労指定しまい、理解がかなりあやふやなのを痛感しました。

そこで、今回ハンバーガメニューの作り方をまとめてみました。

ハンバーガーメニューのパターン

ハンバーガーメニューもいろんなパターンがありますが、基本的なものをあげています。

一般的にハンバーガーメニューは、スマホサイズになった時に表示されるものですが、1つめはPCサイズでも初めからハンバーガーメニューが表示されているパターンです。

この場合は画面サイズに合わせた表示の違いを作っていく必要がないのでとても楽です。

もう一つは一般的な、スマホサイズでハンバーガーメニューが表示されるパターンです。

こちらの場合、画面サイズにあわせて表示が変わるレスポンシブ対応が必要になるため、少し複雑になります。

一般的なハンバーガーメニューでは、やる事は下記になります。

どの程度画面をマスクするか、などはこれもパターンがいろいろありますが、今回は画面全体をマスクして、中央にnavメニューを表示させる形をとっています。

ご存知、Codestepの中級編を参考にさせてもらいました。

PCサイズでハンバーガーメニューが表示されているパターンです。

HTMLは、「メニュー」と「マスク」と「ハンバーガーメニュー」を作っています。

CSSは、

「メニュー」　＝　 opacity:0; にしておいて、classに .openがついたものを別で用意し、そちらはopacity:1; にする。ハンバーガーメニューがクリックされたらclassに.openが付いて表示されるようにする。

「マスク」　＝　　上記と同様。.openがついたものは全体に黒背景を載せるため、position: fixed; とtop:0; left:0; にしている。

「ハンバーガーメニュー」　＝　　.openがついたものはバツ印に変わるように、1本目と2本目をrotate（回転）させて、translateYで位置を修正。

Codestep から必要な箇所のみ抜粋していますが、ハンバーガーメニューの回転は少し多めにアレンジしています。

下記のコードでrotateの数値を多めにすることで、回転数が増えます。

【transform: translateY(-4px) rotate(225deg);】

こちらは一般的な、「PCでは横並びのメニュー、SPサイズでハンバーガーメニューが表示」となるパターンです。

くりのすけさんのnote から活用させてもらいました。

くりのすけさんのnoteは本当に有益だし、ちょっとありえないような手頃な価格で教材を提供していただいているので、初学者はみんな購入すべきものだと思っています。

画面サイズが小さくなった時にハンバーガーメニューが表示されるようにするために、レスポンシブ対応の場合には下記のコードが必要ですね。

【@media screen and (max-width: 1199px)】

画面サイズが1,199px以下になると、3本線が表示されるという仕組みです。

ポイントは黒背景がパツっと変わらないように、transitionを使っているところ。

【transition: opacity .6s ease, visibility .6s ease;】

ググっててもあんまりこういうやり方を紹介しているところがなくて苦労しました。でもぱっぱっと背景が変わることに、個人的に違和感が強かったので、どうしてもやりたくて調べて実装しました。

ハンバーガーメニューはいろいろな実装の仕方がありますし、3本線の変更の仕方もバリエーションが豊富です。またjQueryを使わずに、CSSだけで実装する方法もあります。

凝りだすとキリがないですが、基本的なものを1つマスターするのが良いと思いますので、参考になれば何よりです。