超簡単なjQueryでドロワーメニューを作る方法 | Travelogue

すごく簡単なjQueryでドロワーメニュー（ハンバーガーメニュー）を作る方法をご紹介します。 jQueryのコードは下の通り。 toggleClassというのは、指定しているクラスが無ければ追加して、既にある場合は削除するものです。 つまり.navbar_toggleをクリックした時に、.navbar_toggleに.openが無ければ追加して、既にあれば削除します。 それと同様に、.menuにも.openが無ければ追加し、あれば削除します。 この切り替え動作だけをjQueryで制御し、あとはCSSで見た目を整えるだけです。 $(function() { $('.navbar_toggle').on('click', function () { $(this).toggleClass('open'); $('.menu').toggleClass('open'); }); }); HTML