【HTML&CSS/JS】めっちゃ簡単!ハンバーガーメニューの作り方

今回はよくスマホサイトにある、押すとメニューが表示したり非表示になる

3本線のボタン(通称:ハンバーガーメニュー)の作り方を書いていきます!

ハンバーガーメニューの完成形

まずはハンバーガーメニューの完成形コードを載せちゃいます!
コードだけコピペしたいって人はここからどうぞ!

See the Pen GRogGBQ by gaasuu (@gaasuu) on CodePen.

ハンバーガーメニューの作り方

まずはヘッダーとメインコンテンツを作成

サンプルをわかりやすくするためにヘッダーとメインコンテンツを作成します。

See the Pen JjGPOvx by gaasuu (@gaasuu) on CodePen.

ハンバーガーボタン作成

次にメニューを表示・非表示を切り替えるためのボタンを作成していきます。

See the Pen dyGbZYQ by gaasuu (@gaasuu) on CodePen.

メニューを作成

ボタンを押した時に、表示・非表示させるメニューを作成します。

See the Pen YzwPvvx by gaasuu (@gaasuu) on CodePen.

メニューを非表示にする

ハンバーガーボタンを押してない時はメニューを表示させたくないので

.header-menuに対して

transform:translateX(-120%)

を追加しました。こうすることで画面左側の見えないところにメニューがいることになります。

See the Pen oNbgypB by gaasuu (@gaasuu) on CodePen.

ボタンを押したらメニューを表示

ハンバーガーボタンを押すと左に隠れていたメニューがニュルッと出てきます。
ついでにハンバーガーボタンが×になるようにCSSも指定してみました!

See the Pen GRogGBQ by gaasuu (@gaasuu) on CodePen.

まず、CSSでheader-menuにactiveクラスがついたらメニューが表示するようにします。

nav.header-menu.active {    transform: translateX(0%);}

同様に.nav-toggleにもactiveクラスがついたらspanのハンバーガーボタンの各ライン角度が45度回転し×になるようにします。

.nav-toggle.active span:nth-child(1) {top: 18px; left: 6px; transform: rotate(-45deg);} .nav-toggle.active span:nth-child(2),.nav-toggle.active span:nth-child(3) {    top: 18px; transform: rotate(45deg);}

そしたらjQueryでactiveクラスの追加、削除をするコードを追加します。

$(function() {$('.nav-toggle').click(function(){$(this).toggleClass('active');if ($(this).hasClass('active')) {$('.header-menu').addClass('active');} else {$('.header-menu').removeClass('active');}});});

言葉にすると、「ハンバーガーボタンを押すたび、toggleClassによりactiveクラスをハンバーガーボタンに追加、削除を交互に繰り返す」

「もしハンバーガーボタンを押した時に、メニューがactiveクラスを持っていなかったら追加、持っていたら削除する」となります。

まとめ

メニュー表示中のCSSと非表示のCSSを指定して、それをjQueryでクラスの追加、削除によって制御するという感じですね。

意外と簡単だと思えたのではないでしょうか?

先人たちが作って形になっているものもいっぱいあるのでコピペするだけでもいいのですが、理屈をわかってるのとそうでないのではいざというときに自由度が全然違いますので、せめてコードの意味がわかり編集できるようにりましょう!