eclairのブログ 
スマホ版サイトではおなじみのハンバーガーメニューの作り方を３行のjQueryを元に解説します。javascriptでの作り方を知りたい方は「【コピペ可】jQuery不要！javascriptだけでハンバーガーメニューを実現」をご覧ください。
ハンバーガーメニューの完成デモ
まずはハンバーガーメニューのデモになります。HTMLとCSSとjQueryで実装しています。デモのボタンをクリックするとメニューが開き、もう一度押すとメニューが閉じます。スマホサイトでは頻出する定番のUIになります。
See the Pen 最もシンプルなハンバーガーメニュー実装方法０1 by YutoSeta / ホームページ制作のエクレア (@yutoseta) on CodePen.
jQueryの実装内容を解説
bodyタグの末尾にCDNのjQueryを読み込みましょう
jQueryを使う際には、scriptタグで事前にjQueryを読み込んでからでないと使えません。以下のCDNを読み込むことでjQueryが使えます。
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>以下のリンクより、ダウンロードしてから使うこともできます。
jQuery公式サイト
https://code.jquery.com/
jQueryのソースコード
まずは、HTMLやCSSは無視してjQueryのコードのみご覧ください。
ハンバーガーメニューのデモとして実際に使用しているコードになります。
$('.menu-btn').on('click', function(){
$('.menu').toggleClass('is-active');
});onメソッドとtoggleClassメソッドでクラスの付け替えをする
jqueryのonメソッドはユーザーの操作を検知して、なんらかの処理を実行します。今回は「.menu-btn」要素のクリックしたときに、toggleメソッドを実行しています。toggleClassメソッドでは「.menu」に「is-active」というクラスの付け外しをしています。is-activeがついている時はメニューが開いている状態、付いていない時はメニューが閉じている状態です。
つまりは、onメソッドとtoggleClassメソッドの組み合わせでクリックによってis-activeクラスの付け替えをしています。
jQueryとCSSの役割分担をしよう
jQuery(javascript)は極力クラスの付け替えのみにして、プログラムをシンプルにする
今回のプログラムでは、メニューボタン(.menu-btn)をクリックしたら、メニュークラス(.menu)に任意のクラス(.is-active)の付け替えを行う、という処理しかjqueryには記述していません。クラスの付け替えのみでメニューの閉じ開きを実現しています。この付け替えするクラス「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のクラスの付け替えでその状態を変化させる。というのがシンプルにハンバーガーメニューを実装するポイントです。
その他言語でのハンバーガメニューの作り方について
JavaScriptを使ったハンバーガメニューのつくりかた
【コピペ可】jQuery不要！javascriptだけでハンバーガーメニューを実現
Vue.jsを使ったハンバーガメニューのつくりかた
【コピペ可】Vue.jsでハンバーガーメニューを実現する
Alpine.jsを使ったハンバーガメニューのつくりかた
【コピペ可】Alpine.jsでハンバーガーメニューを実現する
ハンバーガーメニューのCSSについて
【コピペ可】ハンバーガーメニューのCSSデザイン４選
ハンバーガメニューのアニメーションについて
ハンバーガメニューの開閉アニメーションのつくりかた
【コピペ可】ハンバーガーメニューの開閉アニメーション４選
ハンバーガメニューのボタンアニメーションのつくりかた
【コピペ可】ハンバーガーメニューのボタンアニメーション４選
dsplay noneは使わなくてもできんですか？
display:none;を使わずとも画面外にメニューを移動させて待機させておいて、クリックしたと同時に画面内に現れるようにすることで実現できます。
今回でいうと、
transform: translateX(100vw);とすることで画面外にメニューが隠れています。
100vwは画面の横幅の大きさを表しています。
レスポンス化するときの、jQuery 側で記述するにはどうしますか？
・レスポンスしない時は綺麗に完成しました。
・「resize]やinnerWidthなど使いましたが、上手くいきませんでした。
loadイベントとresizeイベントの時に、
ロードした時の画面の横幅に応じて、
ハンバーガーメニューのプログラムを読み込んだり、
イベントの紐付けを解除したりすることで、
レスポンシブの場合でも誤動作を防ぐことができますね。
イベントの紐付け解除はjQueryのoffメソッドを使います。
https://api.jquery.com/off/
コピペで試させてもらったところ、ハンバーガーメニューをクリックしても表示されませんでした。
検証で確認すると、Sourcesで.Jsファイルが空っぽ（何も書かれていない）状態でした。どこが悪いのかわからずコメントで残させてもらいます。
正しくjavascriptファイルが参照できているか確認してみてください。
参照できていた場合は、
プログラムが空っぽだった場合はエディタで編集したあとファイルを保存していない可能性も検討してみてください。
上記の順番でプログラムが読み込まれていれば、大体の場合は動作すると思います。
動作しない原因が検証できないので確実なお答えができず、ごめんなさい🙏
リクエストです！
入力フォームによく使われるステッププログレスバーに挑戦しているのですが、
次の項目を表示させたり、バリデート処理するためのJSと混ざってしまい、詰まっています。
同ページで項目の更新に伴って進むプログレスバーの実装方法についてご教授願います！
リクエストいただけて嬉しいです～😄
jsの処理とcssの処理を管理しやすくきちっとわけるのは、
特にそういったリッチなUIをつくると難しいですよね。
VueやReactを使った処理と通常のjavascriptを使った処理で記事にてご紹介できたらと思いますので、今しばらくお待ちください🙇💦💦
質問よろしいでしょうか？
こちらのハンバーガーメニューから
アンカーリンクでページ内に飛んだ後、再びハンバーガーメニューをタップしてもメニューが開かないのですが、何か原因がわかりませんでしょうか？
こちらサイトのデモではアンカーリンクがなく試すことができず、、、。
Chromeの検証などを使って、以下のような原因がないか探ってみてください。
こちらのハンバーガーメニューでメニュー以外の所をタップすると元の画面に戻るようにするにはどうしたらよいのでしょうか。
以下の手順でプログラムをかいてみるとよいかもしれません。
メニュー本体をクリックしたときにメニューが閉じてしまわないように注意する必要があります。
event.currentTargetをつかって、メニューの外側の要素をクリックしたときにだけメニューを閉じるプログラムを動作させるのがコツになります。
Yuto Seta様
ご返答ありがとうございます。
追加のリクエストなのですが、メニューが開いているときに「バツ印」に切り替えるためにはどうしたらいいのでしょうか。
実装方法についてご教授をお願いします。
メニューを「バツ印」に切り替える場合は、
以下のコードでボタンにもメニューの開閉に応じてクラスの付け替えをして、
「.menu-btn.is-active」のときに「バツ印」を表示させてあげると良いと思います。
「バツ印」はアイコン画像でもspanにスタイルを当てるでもどのようなやり方でも構いません。
$('.menu-btn').on('click', function(){
$('.menu').toggleClass('is-active');
$('.menu-btn').toggleClass('is-active');
});
質問失礼いたします。
ハンバーガーメニューを開いていずれかのリンク先にとんだあと、メニューを自動で閉じるにはどうすればよいでしょうか。
現状ですとハンバーガーメニューが開いたままになります。
1. 別ページに遷移する場合は、
ページ読み込み時にメニューを閉じてあげると良いかと思います。
2. 同じページのリンクであれば、
リンクをクリックした時にクリックイベントが発火されるので
それを元にメニューを閉じてあげる処理を追加してあげましょう。