2022.03.10すごく簡単なjQueryでドロワーメニュー(ハンバーガーメニュー)を作る方法をご紹介します。jQueryのコードは下の通り。toggleClassというのは、指定しているクラスが無ければ追加して、既にある場合は削除するものです。.navbar_toggleをクリックした時に、.navbar_toggleに.openが無ければ追加して、既にあれば削除します。それと同様に、.menuにも.openが無ければ追加し、あれば削除します。この切り替え動作だけをjQueryで制御し、あとはCSSで見た目を整えるだけです。});});HTMLのコードは下の通り。.drawerで囲んである部分がハンバーガーメニューアイコンのためのコードです。.menuで囲んであるのが、ハンバーガーメニューをクリックした時に出てくるドロワーメニューです。href="#">メニュー項目</a></li></ul></div></nav>CSSは下の通り。1行目から36行目がハンバーガーアイコンの位置や形の指定です。.navbar_toggle_iconというのがハンバーガーアイコンの横棒で、26行目から36行目でこれに.openがついた時の変化を指定しています。37行目以降はドロワーメニューが出てきた時の見た目の指定です今回は透明だったものがふわっと表示されるようなデザインにしてあります。Travelogue.。