はじめに
動的なWEBサイト作成でjQueryプラグインをいくつか触ってみたので備忘録としてまとめます。
長いJavascriptを書いて実装していたハンバーガーメニューがこのプラグインを使用すれば簡単にできてしまいます（最初はしっかり書いて実装した方が良いとは思います）。
基本は公式に載っている通りにやっているだけなのですが、もし英語が苦手という方がいれば参考いただければ幸いです。
公式：https://git.blivesta.com/drawer/
この記事で紹介するプラグイン
drawer.js
できること：スライドして現れるハンバーガーメニューの実装。
導入
まずはDrawer、jQuery、iScrollをCDNで読み込みます。
※今回は挙動を確認したいだけなのでCDNを使用します。
index.html
<!-- drawer.css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/css/drawer.min.css">
<!-- 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.2.0/iscroll.min.js"></script>
<!-- drawer.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/js/drawer.min.js"></script>
bodyの中にメニューとjQueryを記述。
bodyのclassを指定してdrawerメソッドを使用。
index.html
<body class="drawer drawer--left"> <!-- bodyのクラスを指定 -->
<header role="banner">
<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" role="navigation">
<ul class="drawer-menu"> <!-- ハンバーガーメニュー部分 -->
<li><a class="drawer-brand" href="#">メニュー</a></li>
<li><a class="drawer-menu-item" href="#">ハンバーガー</a></li>
<li><a class="drawer-menu-item" href="#">チーズバーガー</a></li>
<li><a class="drawer-menu-item" href="#">チキンバーガー</a></li>
</ul>
</nav>
</header>
<script>
$(document).ready(function () {
$('.drawer').drawer(); //drawerメソッドを使用
});
</script>
</body>
これで実装は完了です。
お疲れ様でした。