【コピペ可】jQuery不要！javascriptだけでハンバーガーメニューを実現

JavaScriptでハンバーガーメニューを実装する方法を紹介します。JavaScriptはVanillaJS(バニラJS)やPureJS(ピュアJS)ともいわれます。この方法で実装できるとjQueryが裏側でどんな処理を行っているのかわかり、より応用の効くプログラムが書けるようになります。

jQueryでの作り方を知りたい方は「【コピペ可】３行のjQueryでハンバーガーメニューを作る」をご覧ください。

このページの目次

1 ハンバーガーメニューの完成デモ
2 JavaScriptの実装内容を解説
3 JavaScriptとCSSの役割分担をしよう
- 3.1 JavaScriptは極力クラスの付け替えのみにして、プログラムをシンプルにする
- 3.2 CSSは変化前・変化後の状態を記述する
4 その他言語でのハンバーガメニューの作り方について
5 ハンバーガーメニューのCSSについて
6 ハンバーガメニューのアニメーションについて
- 6.1 ハンバーガメニューの開閉アニメーションのつくりかた
- 6.2 ハンバーガメニューのボタンアニメーションのつくりかた

ハンバーガーメニューの完成デモ

まずはハンバーガーメニューのデモになります。HTMLとCSSとJavaScriptで実装しています。デモのボタンをクリックするとメニューが開き、もう一度押すとメニューが閉じます。スマホサイトでは頻出する定番のUIになります。

See the Pen 最もシンプルなハンバーガーメニュー実装方法０1 by YutoSeta / ホームページ制作のエクレア (@yutoseta) on CodePen.

JavaScriptの実装内容を解説

jQueryのCDNは不要です。

当たり前の話で恐縮ですが、今回はjQueryではなくJavaScriptそのものですので、scriptタグに直接プログラムを書いていけば、jQueryを読み込む必要はありません。

JavaScriptのソースコード

まずは、HTMLやCSSは無視してJavaScriptのコードのみご覧ください。
ハンバーガーメニューのデモとして実際に使用しているコードになります。

document.querySelector('.menu-btn').addEventListener('click', function(){
    document.querySelector('.menu').classList.toggle('is-active');
});

addEventListenerメソッドとtoggleメソッドでクラスの付け替えをする

addEventListenerメソッドはユーザーの操作を検知して、なんらかの処理を実行します。今回は、「.menu-btn」要素をクリック(click)したときに、「.menu」の要素のクラス一覧（classList）からtoggleメソッドによって「is-active」というクラスの付け外しをしています。is-activeがついている時はメニューが開いている状態、付いていない時はメニューが閉じている状態です。

つまりは、addEventListenerメソッドとtoggleメソッドの組み合わせでクリックで指定の要素にis-activeクラスの付け替えをしています。

JavaScriptとCSSの役割分担をしよう

JavaScriptは極力クラスの付け替えのみにして、プログラムをシンプルにする

今回のプログラムでは、メニューボタン(.menu-btn)をクリックしたら、メニュークラス(.menu)に任意のクラス(.is-active)の付け替えを行う、という処理しかJavaScriptには記述していません。クラスの付け替えのみでメニューの閉じ開きを実現しています。この付け替えするクラス「is-active」はメニューがアクティブな状態(開いている)とそうでない状態(閉じている)を表現するためのクラスになっています。HTMLとCSSが中心のウェブサイトでは、このようにしてJavaScriptはなるべくクラスの付け替えだけで実現してあげるとプログラムがシンプルになります。

CSSは変化前・変化後の状態を記述する

さて、.menuにis-activeというクラスが付け替えられているわけですが、ここでCSSをみてみましょう。以下の部分がクラスの付け替えによって書き換えられるスタイル部分です。

/*----------------------------
* アニメーション部分
*----------------------------*/
/* アニメーション前のメニューの状態 */
.menu{
  transform: translateX(100vw);
  transition: all .3s linear;
}
/* アニメーション後のメニューの状態 */
.menu.is-active{
  transform: translateX(0);
}

transitionでは、アニメーション前のメニューの状態とアニメーション後のメニューの状態を0.3秒間かけて一定のスピード(linear)で変化させることでアニメーションを実現しています。

アニメーション前のメニューの状態（is-activeクラスが付いていないとき）はtransform:translateX(100vw);で右に画面幅(100vw)分だけずらしています。これでメニューを閉じている時の位置にしています。

アニメーション後のメニューの状態（is-activeクラスがついているとき）はtransform:translateX(0);として右にずれた分を元に戻しています。これでメニューを開いている時の位置にしています。

CSSでアニメーション前のメニューとアニメーション後のメニューを定義して、javascriptのクラスの付け替えでその状態を変化させる。というのがシンプルにハンバーガーメニューを実装するポイントです。