以前、「【jQuery】スマートフォンサイトで使える！上からヌルッと出てくるドロワーメニューの実装方法」にてjQueryプラグインを使ったドロワーメニューの設置方法についてご紹介しましたが、今回はプラグインを使わず自分でjQueryを設定してドロワーメニューを設置する方法についてご紹介したと思います！
なお作成する流れとしては
↓
jQueryで動きをつける
といった形になります！
目次
デモページ
まずはデモページはこちらになります！
デモページ
HTMLを記述する
それではまずHTMLを記述していきましょう(^^)
今回は上のデモページと同じソースで解説したいと思います！
<div class="head-bar"> <a class="menu-btn"> <span></span> <span></span> <span></span> </a> </div> <ul class="sp-menu"> <li><a href="">メニュー</a></li> <li><a href="">メニュー</a></li> <li><a href="">メニュー</a></li> <li><a href="">メニュー</a></li> <li><a href="">メニュー</a></li> </ul>
解説としては、<div class=”head-bar”>～</div>がドロワーメニューの帯部分（デモページでいう灰色部分）で、<a class=”menu-btn”>～</a>がハンバーカーボタンになります。
そして<ul class=”sp-menu”>～</ul>がドロワーメニュー部分になります。
CSSを設定する
では続いてCSSを設定していきましょう。
帯部分のCSSを設定する
帯部分については今回以下のように設定しました。
.head-bar {
background: #ccc;
box-sizing: border-box;
height: 50px;
padding: 10px 2.5%;
}
今回は帯の高さとして50pxを設定してあります。
ハンバーガーメニューのCSSを設定する
続いてハンバーガーボタンのCSSを設定しましょう。
今回は以下のように設定しました。
.menu-btn,
.menu-btn span {
display: inline-block;
transition: all .4s;
box-sizing: border-box;
}
.menu-btn {
display: block;
float: right;
margin: 0 auto;
position: relative;
width: 40px;
height: 30px;
}
.menu-btn span {
position: absolute;
left: 0;
width: 100%;
height: 4px;
background-color: #000;
}
.menu-btn span:nth-of-type(1) {
top: 0;
}
.menu-btn span:nth-of-type(2) {
top: 13px;
}
.menu-btn span:nth-of-type(3) {
bottom: 0;
}
ドロワーメニューのCSSを設定する
そして最後にドロワーメニュー部分のCSSを設定します。
今回は以下のように設定しました。
.sp-menu {
display: none;
}
.sp-menu li {
box-sizing: border-box;
border-bottom: 1px solid #fff;
}
.sp-menu li a {
background: #000;
box-sizing: border-box;
color: #fff;
display: block;
font-size: 16px;
line-height: 26px;
padding: 5px 10px;
text-decoration: none;
width: 100%;
}
ここで大事になってくるのが、ドロワーメニューはハンバーガーボタンを押してヌルヌルっと出てくるようにしたいので、デフォルトでは非表示にしておくことです。
そのため、1～3行目にあるように非表示設定をしておきましょう！
jQueryを設定する
それでは最後にjQueryを記述してヌルヌル出てくるよう設定しましょう。
今回は以下のように設定しました。
<script>
$(function(){
$(".menu-btn").click(function(){
$(".sp-menu").slideToggle(200);
});
$(".sp-menu li a").click(function(){
$(".sp-menu").css({display:"none"});
});
});
</script>
3～5行目で、class名menu-btn（今回でいうハンバーガーボタン）をクリック（タップ）した時にドロワーメニューがヌルヌルと出てくるよう設定しています。
続いて6～8行目で、ドロワーメニューのリンクをクリック（タップ）した時にドロワーメニューが非表示になるよう設定しています。
この設定をしていないとリンクをクリックしてもドロワーメニューが表示されたままでちょっと邪魔になるので、この設定は忘れないよう記述しておくことをオススメします！
【番外編】ドロワーメニュー以外のところをクリック（タップ）したらメニューが閉じるようにするには？
最後に番外編として、ドロワーメニュー以外のところをクリック（タップ）したらメニューが閉じるようにする方法についてお話したいと思います！
前項で解説したjQueryだと、ハンバーガーボタンを押さないとメニューが消えないようになっています。
そこで、ハンバーガーボタンじゃなくてメニュー以外の画面部分をクリック（タップ）しただけでもメニューが消えるよう設定する…ということを希望することが結構あったりします。
その場合は、以下のjQueryを追記してあげることで可能になります！
$('.menu-btn').click(function() {
event.stopPropagation();
});
$(document).click(function(event) {
if (!$(event.target).closest('.sp-menu').length) {
$('.sp-menu').slideUp(200);
}
});
具体的には、5～9行目にて、ドロワーメニュー以外の部分をクリック（タップ）することでドロワーメニュー部分がスライドアップして非表示になるよう設定しています。
スライドアップについては7行目の
$('.sp-menu').slideUp(200);
にてslideUpと記述していることで可能になっています。
ここを間違えてslideToggleにしてしまうと挙動がおかしくなってしまうので、ここだけは気を付けましょう！
まとめ
以上が上からヌルヌル出てくるドロワーメニューを一から作成する方法でした！
この方法を応用すればいろいろなデザインのものにも実装できるようになるので、是非ともご活用くださいませ(^-^)/
