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

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

３本線のボタン（通称：ハンバーガーメニュー）の作り方を書いていきます！

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

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

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

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

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クラスを持っていなかったら追加、持っていたら削除する」となります。