こんにちは。emiです。
ハンバーガーメニューをjQueryで書いている方も多いと思います。
最近は、Vanilla JS(素のJavaScript)で書いていますので、紹介します。
できるもの
ボタンをクリックすると、メニューが現れます。
See the Pen Hamburger menu(Vanilla JS) by emi (@emi-jp) on CodePen.
メニューにも
.menu_isOpenクラスがついた時のスタイルをつければ、もっとメニューらしくなります。
基本的な挙動とコード
下記が超基本となります。
私はこのコードだけコピペ、
案件ごとにスタイルをつけています。
See the Pen Hamburger menu(Vanilla JS) by emi (@emi-jp) on CodePen.
なぜjQueryからVanilla JSへ？
現在はブラウザ間の差異が少なくなったから
昔は同じJavaScriptコードでもブラウザ（Google,IE,Safariなど）間での差異があり、jQueryはその違いを吸収していたので、すごく便利なものでした。
jQuery を読み込まなくて良いから
jQueryファイルの読み込みが少ない分、表示速度が向上する。
参考
jQueryを使用したハンバーガーメニュー
過去にはjQueryを使用したハンバーガーメニューも紹介しています。
（ボタンクリックでふわっとメニューが現れます。）
スタイルなどは、クラス名を変えれば同じものを使えると思います。
