ハンバーガーメニューが実装できるjQueryプラグイン、drawer.jsの使い方です。使用にはjQuery以外にdrawer.css、iscroll.js、drawer.jsの読み込みが必要です。CDNも提供されています。
<link href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/css/drawer.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.2.0/iscroll.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/js/drawer.min.js"></script>htmlの記述は大きく分けて3つあります。bodyタグへのクラス追加、開く・閉じるボタンの追加、展開メニューの追加です。
bodyタグへのクラス追加です。クラス名drawerはjQueryのセレクタ、クラス名drawer--rightはハンバーガーメニューを右側から開きます。
<body class="drawer drawer--right">開く・閉じるボタンの追加です。
<button type="button" class="drawer-toggle drawer-hamburger">
<span class="sr-only">toggle navigation</span>
<span class="drawer-hamburger-icon"></span>
</button>展開メニューの追加です。最後のメニューはテスト用にページ内リンクにしています。
<nav class="drawer-nav">
<ul class="drawer-menu">
<li><a href="#">メニュー01</a></li>
<li><a href="#">メニュー02</a></li>
<li><a href="#">メニュー03</a></li>
<li><a href="#">メニュー04</a></li>
<li><a href="#page01">ページ内リンク</a></li>
</ul>
</nav>CSSの記述ではdrawer.cssを上書きしますが必須ではありません。PCサイトでハンバーガーメニューを非表示にしています。また、開く・閉じるボタンはposition: fixed;からposition: absolute;へ変更して画面追従をさせていません。
@media screen and (min-width:769px) {
.drawer-hamburger {
display: none;
}
}
.drawer-hamburger {
position: absolute;
top: 10px;
}
.drawer-menu li {
padding: 20px 0 0;
font-weight: bold;
text-align: center;
}
.drawer-menu li a:hover {
opacity: 1;
}最後にjQueryの記述です。デフォルトではページ内リンククリック時にハンバーガーメニューが閉じないので、$('.drawer').drawer('close');で閉じるようにしています。
$(function() {
$('.drawer').drawer();
$('.drawer-menu li a').on('click', function() {
$('.drawer').drawer('close');
});
});
