少ないコードでドロワーメニューを実装できるjQueryプラグイン「Drawer」

2017年11月21日

最近、自作のWEBサイトのスマホ版のほうを修正しました。
[kanren postid=”381″]

その時にドロワーメニューを導入したかったのでいろいろ探すことに。
そいて簡単にドロワーメニューを導入できるjQueryプラグインのDrawerを導入しました！

今回は少ないコードでドロワーメニューを実装できるjQueryプラグイン Drawerを紹介します。

導入方法

ダウンロード

CDNがあるので、今回はCDNを使ってデモを作っていきます。
ファイルをダウンロードしたい方は、公式サイトにアクセスからどうぞ。

コード

DrawerのCSSと本体、そしてjQueryを読み込みます。

<!-- 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>

続いてHTMLの記述です。
今回は公式サイトのHTMLよりシンプルに記述していきます。

ポイントは3つです。

bodyのclassにdrawerとdrawer–leftを追加
ドロワーメニューにしたい要素のclassにdrawer-navを追加
ドロワーメニュー内に”閉じる”リンクを作成。classにdrawer-toggleを追加
ドロワーを表示するためのボタンのclassにdrawer-toggleを追加

※.drawer-toggleはドロワーメニューが閉じているときにクリックすると、メニュー表示。
開いているときにクリックすると、メニューが閉じられます。

<body class="drawer drawer--left">

    <!-- ドロワーで表示されるメニュー -->
    <nav class="drawer-nav" role="navigation">
        <ul class="drawer-menu">
            <li><a class="drawer-brand" href="#">Brand</a></li>
            <li><a class="drawer-menu-item" href="#">Nav1</a></li>
            <li><a class="drawer-menu-item drawer-toggle" href="#">Nav2</a></li>
        </ul>
    </nav>

    <!-- ドロワーを表示するためのボタン -->
    <button class="drawer-toggle">メニュー表示</button>

</body>

最後にスクリプトを記述します。

$(document).ready(function () {
    $('.drawer').drawer();
});

以上のコードで実装は完了です。
ドロワーメニューが表示されたら、オーバーレイ部分か”閉じる”リンクをクリックすることでメニューが閉じられます。
[btn class=”rich_pink”]デモ確認へ[/btn]

オプション

開閉のイベントを取得する

Drawerではドロワーメニューが開いたときと、閉じたときのイベントを取得することができます。
javascriptを以下のように記述しましょう。

$(document).ready(function () {
    // Drawer読み込み
    $('.drawer').drawer();

    // ドロワーメニューが開いたとき
    $('.drawer').on('drawer.opened', function(){
        alert('ドロワーが開きました');
    });

    // ドロワーメニューが閉じたとき
    $('.drawer').on('drawer.closed', function(){
        alert('ドロワーが閉じられました');
    });
});

注意点としては、”開ききったとき”と”閉じきったとき”に実行されるという点です。
[btn class=”rich_pink”]デモ確認へ[/btn]

スクリプトでメニューの開閉を制御する

クリックイベントなどでjavascript側からドロワーメニューの開閉を制御することも可能です。

HTMLを修正します。

<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="#">メニュー1</a></li>
        <li><a class="drawer-menu-item" href="#">メニュー2</a></li>
        <li><a class="drawer-menu-item" href="#">メニュー3</a></li>
        <li><a class="drawer-menu-item close-link" href="#">閉じる</a></li>
        <li><a class="drawer-menu-item toggle-start" href="#">toggle実行</a></li>
    </ul>
</nav>
<button class="open-btn">メニュー表示</button>
<button class="toggle-start">toggle実行</button>

クリックイベントで、ドロワーメニューを制御させるスクリプトを記述します。

$(document).ready(function () {
    // Drawer読み込み
    $('.drawer').drawer();
    
    // .open-btnクリック時、ドロワーを開く
     $('.open-btn').click(function(){
         $('.drawer').drawer('open');
    });

    // .close-linkクリック時、ドロワーを閉じる
    $('.close-link').click(function(){
         $('.drawer').drawer('close');
    });
    
    // .toggle-startクリック時、
    // .drawer-toggleをクリックしたときと同じ処理を実行
    $('.toggle-start').click(function(){
         $('.drawer').drawer('toggle');
    });
});

[btn class=”rich_pink”]デモ確認へ[/btn]