2022年7月15日SHAREツイートシェアはてブLINEPocketスマホ版サイトではおなじみのハンバーガーメニューの作り方を3行のjQueryを元に解説します。javascriptでの作り方を知りたい方は「【コピペ可】jQuery不要!javascriptだけでハンバーガーメニューを実現」をご覧ください。ハンバーガーメニューの完成デモまずはハンバーガーメニューのデモになります。HTMLとCSSとjQueryで実装しています。デモのボタンをクリックするとメニューが開き、もう一度押すとメニューが閉じます。スマホサイトでは頻出する定番のUIになります。CodePen.jQueryの実装内容を解説bodyタグの末尾にCDNのjQueryを読み込みましょうjQueryを使う際には、scriptタグで事前にjQueryを読み込んでからでないと使えません。以下のCDNを読み込むことでjQueryが使えます。crossorigin="anonymous"></script>以下のリンクより、ダウンロードしてから使うこともできます。jQuery公式サイトhttps://code.jquery.com/jQueryのソースコードまずは、HTMLやCSSは無視してjQueryのコードのみご覧ください。ハンバーガーメニューのデモとして実際に使用しているコードになります。$('.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をみてみましょう。以下の部分がクラスの付け替えによって書き換えられるスタイル部分です。translateX(0);}transitionでは、アニメーション前のメニューの状態とアニメーション後のメニューの状態を0.3秒間かけて一定のスピード(linear)で変化させることでアニメーションを実現しています。アニメーション前のメニューの状態(is-activeクラスが付いていないとき)はtransform:translateX(100vw);で右に画面幅(100vw)分だけずらしています。これでメニューを閉じている時の位置にしています。アニメーション後のメニューの状態(is-activeクラスがついているとき)はtransform:translateX(0);として右にずれた分を元に戻しています。これでメニューを開いている時の位置にしています。CSSでアニメーション前のメニューとアニメーション後のメニューを定義して、javascriptのクラスの付け替えでその状態を変化させる。いうのがシンプルにハンバーガーメニューを実装するポイントです。2020年1月5日display:none;を使わずとも画面外にメニューを移動させて待機させておいて、クリックしたと同時に画面内に現れるようにすることで実現できます。translateX(100vw);とすることで画面外にメニューが隠れています。100vwは画面の横幅の大きさを表しています。側で記述するにはどうしますか?・レスポンスしない時は綺麗に完成しました。・「resize]やinnerWidthなど使いましたが、上手くいきませんでした。2020年6月3日loadイベントとresizeイベントの時に、ロードした時の画面の横幅に応じて、ハンバーガーメニューのプログラムを読み込んだり、イベントの紐付けを解除したりすることで、レスポンシブの場合でも誤動作を防ぐことができますね。イベントの紐付け解除はjQueryのoffメソッドを使います。2020年6月4日コピペで試させてもらったところ、ハンバーガーメニューをクリックしても表示されませんでした。検証で確認すると、Sourcesで.Jsファイルが空っぽ(何も書かれていない)状態でした。どこが悪いのかわからずコメントで残させてもらいます。javascriptファイルが参照できているか確認してみてください。参照できていた場合は、プログラムが空っぽだった場合はエディタで編集したあとファイルを保存していない可能性も検討してみてください。1.jQuery本体のプログラムを読み込む2.ハンバーガーメニューのプログラムを読み込む上記の順番でプログラムが読み込まれていれば、大体の場合は動作すると思います。次の項目を表示させたり、バリデート処理するためのJSと混ざってしまい、詰まっています。いったリッチなUIをつくると難しいですよね。質問よろしいでしょうか?こちらのハンバーガーメニューからアンカーリンクでページ内に飛んだ後、再びハンバーガーメニューをタップしてもメニューが開かないのですが、何か原因がわかりませんでしょうか?こちらサイトのデモではアンカーリンクがなく試すことができず、、、。2021年6月24日Chromeの検証などを使って、以下のような原因がないか探ってみてください。2021年5月2日こちらのハンバーガーメニューでメニュー以外の所をタップすると元の画面に戻るようにするにはどうしたらよいのでしょうか。以下の手順でプログラムをかいてみるとよいかもしれません。メニュー本体をクリックしたときにメニューが閉じてしまわないように注意する必要があります。event.currentTargetをつかって、メニューの外側の要素をクリックしたときにだけメニューを閉じるプログラムを動作させるのがコツになります。Seta様ご返答ありがとうございます。追加のリクエストなのですが、メニューが開いているときに「バツ印」に切り替えるためにはどうしたらいいのでしょうか。実装方法についてご教授をお願いします。「.menu-btn.is-active」のときに「バツ印」を表示させてあげると良いと思います。「バツ印」はアイコン画像でもspanにスタイルを当てるでもどのようなやり方でも構いません。ハンバーガーメニューを開いていずれかのリンク先にとんだあと、メニューを自動で閉じるにはどうすればよいでしょうか。現状ですとハンバーガーメニューが開いたままになります。別ページに遷移する場合は、ページ読み込み時にメニューを閉じてあげると良いかと思います。同じページのリンクであれば、リンクをクリックした時にクリックイベントが発火されるのでそれを元にメニューを閉じてあげる処理を追加してあげましょう。コメントをキャンセルメールアドレスが公開されることはありません。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。