Home Web 【jQuery】簡単にドロワーメニューを実装できる「Drawer」の使い方

【jQuery】簡単にドロワーメニューを実装できる「Drawer」の使い方

jQuery Drawer

jQueryプラグイン「Drawer」の使い方をご紹介します。

スマホサイト等でよく見かける「」ボタンをクリックすると横からスライドして現れるドロワーメニューです。

DEMOページを作成しました。

DEMO jQuery Drawer | MISOBLOG

Drawerのダウンロード方法

Drawer公式サイト

下記の公式サイトのリンクから、DrawerのjsファイルとCSSファイル、iScrollというjsファイルをダウンロードします。

Drawer – Flexible drawer menu using jQuery, iScroll and CSS.

ちなみに、必要なファイルはCDNでも用意されていますので、下記のコードを読み込むとすぐに使用することができます。


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/css/drawer.min.css">

<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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/js/drawer.min.js"></script>

drawerのダウンロード

GitHub – blivesta/drawer: Flexible drawer menu using jQuery, iScroll and CSS.

ダウンロードしたzipファイルを解凍し、その中の「dist」フォルダ内にあるCSSファイルとJSファイルを使用します。

iscrollのダウンロード

GitHub – cubiq/iscroll: Smooth scrolling for the web

ダウンロードしたzipファイルを解凍し、その中の「build」フォルダ内にある「iscroll.js」というファイルを使用します。

Drawerの実装方法


<link rel="stylesheet" href="drawer.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="js/iscroll.js"></script>
<script src="js/drawer.min.js"></script>

HTMLのマークアップ

bodyタグに下記のclassを記述します。


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

drawer—left」と書くと左側からドロワーメニューが表示されます。「drawer—right」で右側から。


<button type="button" class="drawer-toggle drawer-hamburger">
    <span class="sr-only">toggle navigation</span>
    <span class="drawer-hamburger-icon"></span>
</button>

」ボタンを表示するためのHTMLです。


<nav class="drawer-nav">
    <ul class="drawer-menu">
        <li><a href="#">menu1</a></li>
        <li><a href="#">menu2</a></li>
        <li><a href="#">menu3</a></li>
    </ul>
</nav>

ドロワーメニューの中身はこのように書いています。


<script>
$(function() {
    $('.drawer').drawer();
});
</script>

最後にDrawerを動かすために、上記のjQueryのコードを記述します。


ドロワーメニュー「Drawer」の実装方法は以上です。
とても簡単に使えて、動きも良い感じなのでオススメのプラグインです。

DEMO jQuery Drawer | MISOBLOG

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

This site uses Akismet to reduce spam. Learn how your comment data is processed.