【jQueryで簡単】ドロワーメニューの作り方：Drawerの使い方【コピペでOK】

プログラミング

2019.06.26 2019.06.14

困ってる人

ハンバーガーボタンをクリックして、メニュー画面が表示されるようにしたい
スマホとかでよく見る、ドロワーメニューの作り方ってどうやればいいんだろう？

それでしたら本日は、Drawerの使い方をご案内しますね

オペレーター

こんにちは、ヨロと申します。

という事で今回は「Drawer」の導入方法という事で、

Drawerを使う事によって、ドロワーメニューをとても簡単に実装出来るようになります。

【jQueryで簡単】ドロワーメニューの作り方：Drawerの使い方【コピペでOK】
1. ファイルを保存する場所：フォルダの階層
2. ファイルの読み込み

【jQueryで簡単】ドロワーメニューの作り方：Drawerの使い方【コピペでOK】

という事で、まず最初にやる事は、

・drawer.css、drawer.jsをダウンロード

ダウンロードはこちらから
https://github.com/blivesta/drawer/

「Clone or download」をクリック

↓

「Download ZIP」をクリック

↓

ダウンロードしたZIPファイルを解凍、

そうすると、中にこれらのファイルが入っている。

・drawer.css
・drawer.js

ダウンロードが終わったら、次は「iscroll.js」のダウンロード。

・iscroll.jsをダウンロード

「iscroll.js」のダウンロードがこちらから。
https://github.com/cubiq/iscroll

↓

「Clone or download」をクリック

↓

「Download ZIP」をクリック

↓

ダウンロードしたZIPファイルを解凍、

そうすると、中に、

・iscroll.js

が入っているので、

↓

「drawer.css」をCSSフォルダに保存

「drawer.js」「iscroll.js」を、jsフォルダに保存。

ファイルを保存する場所：フォルダの階層

・index.html

・CSSフォルダ
– style.css
– drawer.css

・jsフォルダ
– script.js
– drawer.js
– iscroll.js

ファイルの読み込み

/* CSSファイルの読み込み */
<link rel="stylesheet" href="css/drawer.css">

/* jQuery, JavaScriptファイルの読み込み */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="js/drawer.js"></script>
<script src="js/iscroll.js"></script>

ファイルを読み込む準備が出来たら、次はHTMLを書いていく。

・HTML

// HTML(index.html)

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

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

    <nav class="drawer-nav">
        <ul class="drawer-menu">
                <li><a class="drawer-brand" href="#">メニュー一覧</a></li>
            <li><a href="#" class="drawer-menu-item">メニュー1</a></li>
            <li><a href="#" class="drawer-menu-item">メニュー2</a>
                <ul>
                    <li><a href="#" class="drawer-dropdown-menu-item">子メニュー</a></li>
                    <li><a href="#" class="drawer-dropdown-menu-item">子メニュー</a></li>
                    <li><a href="#" class="drawer-dropdown-menu-item">子メニュー</a></li>
                </ul>
            </li>
            <li><a href="#" class="drawer-menu-item">メニュー3</a></li>
        </ul>
    </nav>


    <script src="js/script.js"></script>
    <script src="js/drawer.js"></script>
    <script src="js/iscroll.js"></script>
</body>

これが基本的な形で、クラス名は変更せずにそのまま使うのが便利で楽。

あとは、必要なCSSファイルやJavaScriptのファイルを読み込んだら、

script.jsに、以下を書くだけでOK。

// script.js

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

これらを追加するだけで、とりあえずはドロワーメニューの完成。

とても簡単。