class=”menu-btn”>~</a>がハンバーカーボタンになります。class=”sp-menu”>~</ul>がドロワーメニュー部分になります。CSSを設定するでは続いてCSSを設定していきましょう。帯部分のCSSを設定する帯部分については今回以下のように設定しました。2.5%;}今回は帯の高さとして50pxを設定してあります。ハンバーガーメニューのCSSを設定する続いてハンバーガーボタンのCSSを設定しましょう。今回は以下のように設定しました。0;}ドロワーメニューのCSSを設定するそして最後にドロワーメニュー部分のCSSを設定します。今回は以下のように設定しました。100%;}ここで大事になってくるのが、ドロワーメニューはハンバーガーボタンを押してヌルヌルっと出てくるようにしたいので、デフォルトでは非表示にしておくことです。そのため、1~3行目にあるように非表示設定をしておきましょう!jQueryを設定するそれでは最後にjQueryを記述してヌルヌル出てくるよう設定しましょう。今回は以下のように設定しました。a").click(function(){$(".sp-menu").css({display:"none"});});});</script>3~5行目で、class名menu-btn(今回でいうハンバーガーボタン)をクリック(タップ)した時にドロワーメニューがヌルヌルと出てくるよう設定しています。続いて6~8行目で、ドロワーメニューのリンクをクリック(タップ)した時にドロワーメニューが非表示になるよう設定しています。この設定をしていないとリンクをクリックしてもドロワーメニューが表示されたままでちょっと邪魔になるので、この設定は忘れないよう記述しておくことをオススメします!【番外編】ドロワーメニュー以外のところをクリック(タップ)したらメニューが閉じるようにするには?最後に番外編として、ドロワーメニュー以外のところをクリック(タップ)したらメニューが閉じるようにする方法についてお話したいと思います!前項で解説したjQueryだと、ハンバーガーボタンを押さないとメニューが消えないようになっています。そこで、ハンバーガーボタンじゃなくてメニュー以外の画面部分をクリック(タップ)しただけでもメニューが消えるよう設定する...ということを希望することが結構あったりします。{$('.sp-menu').slideUp(200);}});具体的には、5~9行目にて、ドロワーメニュー以外の部分をクリック(タップ)することでドロワーメニュー部分がスライドアップして非表示になるよう設定しています。スライドアップについては7行目の$('.sp-menu').slideUp(200);にてslideUpと記述していることで可能になっています。