はじめに

動的な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>

これで実装は完了です。
お疲れ様でした。