ハンバーガーメニューでのページ内遷移のあれこれ
hamburger-menu
headタグ内にjqueryとiScrollを読み込みます。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.1.3/iscroll.min.js"></script>
次に、Drawerのjsとcssファイルを読み込みます
<link rel="stylesheet" href="drawer.min.css"> <script src="drawer.min.js"></script>
jsファイルは以下に
- dist
- ┗js
- ┗drawer.min.js
cssファイルは以下に
- dist
- ┗css
- ┗drawer.min.css
最後にjQueryを読み込みます。
$(document).ready(function() { $(".drawer").drawer(); });
あまり考えたことはなかったんですがページ内遷移だとハンバーガメニューは開きっぱなしなんです。
遷移した後に閉じたほうがいいということで。
$(document).ready(function() { $('.drawer').drawer(); $('#menu li').on('click', function() { $('.drawer').drawer('close'); }); });
こうしました。