見出し画像

【 jQuery 】 Drawer.jsを使ってドロワーメニューを簡単コーディング ♪ 投資家のFIREへの旅路 第289回

S.A.P.Studio

ドロワーメニュの簡単な実装方法をご紹介します！
簡単すぎて罪悪感すらありますが、車輪の再発明をしないことは正しいです！

コードはこちらの、グリッドレイアウト解説のコードを引き続き使っています。よろしければご覧ください。



【ドロワーメニュー】

作成するドロワーメニュとは、こういうやつです。
よく見るあいつですね。

左上のハンバーガーメニュをクリックすると。。。

↓↓↓↓↓↓↓↓↓↓↓

ニュッとスライドして出てくるメニュです。
Drawerとは、「引き出し」を意味する英語です。
名前の通り！引き出しのように、出てくるメニュです。

（英語の理解があると、プログラミングの世界ってだいぶ有利ですね。。。）

【Drawer】

その名もDrawerというjQueryのライブラリを使います。
こちらからWEBサイトへ移動します。


〈 Drawer 使い方〉

Drawer　トップページ

トップページには、
「Flexible drawer menu using jQuery, iScroll and CSS」
と書かれています。
つまり、
jQueryのライブラリiScrollと、CSSを使った汎用性の高いドロワーメニュということです！

こちらのページから必要な要素をコピペしていきます。


〈 Step 1 CDN 〉

Step1 CDN

スクロールをしていくと、
「CDN」と書かれた下に、コードがあります。

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

このコードをそのままコピーしましょう！
そして、自分のエディタのheadタグ内にペーストします。

<!DOCTYPE html>
<html lang="ja">


<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
    <link rel="stylesheet" href="css/style.css">



    <!-- この下にペーストしました -->

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


　　　　　　　<!-- この上にペーストしました -->



    <title>GridLayout</title>


</head>

これで、Drawerメニュの実装に必要な、jQueryのライブラリとリンクされました。
コメントアウトされた文字をみてみましょう。
<!-- drawer.css -->
<!-- jquery & iScroll -->
<!-- drawer.js -->
このように書かれているので、
drawerに必要なCSS
jquery　と iScrollライブラリ
drawerライブラリ
と、リンクされたということです！



〈Step 2 Markup 〉

Step2 Markup

続いては、Step 2：Markupのところにコードをコピーします。

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

  <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="#">Brand</a></li>
        <li><a class="drawer-menu-item" href="#">Nav1</a></li>
        <li><a class="drawer-menu-item" href="#">Nav2</a></li>
      </ul>
    </nav>

  </header>

  <main role="main">

    <!-- Page content -->

  </main>


</body>


コピーする際に、気を付けるポイントは、
まるまるコピーすると、
<body>タグ
<header>タグ
<main>タグ
が入っているので、自分が書いているコードに適切に
ペーストする必要があります。

<body>タグから始まるので、<head>タグの終了タグの下にペーストします。

</head>


<!-- ここから下にペーストしました -->

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

    <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="#">Brand</a></li>
                <li><a class="drawer-menu-item" href="#">Nav1</a></li>
                <li><a class="drawer-menu-item" href="#">Nav2</a></li>
            </ul>
        </nav>

    </header>

    <main role="main">

        <!-- Page content -->
        <!-- ここから下は自分の書いたコンテンツ -->

        <div class="grid-container">
            <div class="title">
                <p>グリッドレイアウトをマスターしよう</p>
            </div>
            <div class="photo1"><img src="img/photo1.jpg" alt="1"></div>
            <div class="photo2"><img src="img/photo2.jpg" alt="2"></div>
            <div class="photo3"><img src="img/photo3.jpg" alt="3"></div>
            <div class="photo4"><img src="img/photo4.jpg" alt="4"></div>
            <div class="text">
                <p>GridLayout</p>
            </div>
        </div>



    </main>

</body>

<!-- ここから上にペーストしました -->


〈 Step 3 Call the Drawer 〉

Step 3 jQuery

続いては、Step3 : call the Drawerといところにコードをコピーします。

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

こちらのコードは、jQueryのコードになります。
jQueryとは、javaScriptのライブラリですから、
<script>タグ内にペーストする必要があります。

<script>タグは、</body>の上に書きます。


    <script>

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


    </script>


</body>


これでひとまず完成です。
全てのコードをつなげるとこうなります！

〈 Drawer メニュ完成 〉

<!DOCTYPE html>
<html lang="ja">


<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
    <link rel="stylesheet" href="css/style.css">

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


    <title>GridLayout</title>

</head>


<body class="drawer drawer--left">
    <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="#">Nav1</a></li>
                <li><a class="drawer-menu-item" href="#">Nav2</a></li>
                <li><a class="drawer-menu-item" href="#">Nav3</a></li>
                <li><a class="drawer-menu-item" href="#">Nav4</a></li>
                <li><a class="drawer-menu-item" href="#">Nav5</a></li>
            </ul>
        </nav>

    </header>


    <main role="main">

        <div class="grid-container">
            <div class="title">
                <p>グリッドレイアウトをマスターしよう</p>
            </div>
            <div class="photo1"><img src="img/photo1.jpg" alt="1"></div>
            <div class="photo2"><img src="img/photo2.jpg" alt="2"></div>
            <div class="photo3"><img src="img/photo3.jpg" alt="3"></div>
            <div class="photo4"><img src="img/photo4.jpg" alt="4"></div>
            <div class="text">
                <p>GridLayout</p>
            </div>
        </div>


    </main>



    <script>

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


    </script>


</body>

</html>



【Drawer カスタマイズ】

上記のコードを展開すると、左上にハンバーガーメニュが設置されているはずです。
このハンバーガーメニュの位置や、ドロワーメニュが出てくる方向や、ナビバーの実装など、さまざまなパターンのデザインにカスタマイズできちゃいます！！


〈 Drawer カスタマイズ方法 〉

トップページからハンバーガーメニュをクリックすると、
メニュが開きます。

ここに出てくる、

  • Top

  • Left

  • Right

  • Navbar

  • Fixed Navbar

  • Slidebar

  • Dropdown

の項目をクリックします。

例えば、「Right」をクリックすると、
こんな感じの新たなコードが出てきます。


これは、先程、コピペした、HTMLの箇所が、「Right」バージョンに書きかわったコードです。
何が「Right」かというと、ハンバーガーメニュの位置が「右」にあるだけです。

コードの違いは、<body>タグのクラス名です。

rightバージョン

<body class="drawer drawer--right">
ハンバーガーメニュが右上


Leftバージョン

<body class="drawer drawer--left">
ハンバーガーメニュが左上


このように、他のレイアウトも選択すると、
新たなHTMLコードが出てくるので、こちらをコピペするだけで、
固定のナビメニュが実装できたり、
ドロップダウンメニュんが実装できてしまいます！！

最高か！！


【まとめ】

ドロワーメニュが簡単に実装できる、jQueryライブラリ「Drawer」を紹介しました。

さまざまなドロワーメニュが実装でき、
また、ヘッダーナビなんかも簡単に作れてしました。

このようなライブラリを使うことには、賛否両論ありますが、
車輪の再発明は時間の無駄です。

使えるものは使いましょう！

何より、
使えるようになるには、一定の基礎となる知識が必要なので、
そこまで頑張ったんだから、理解だけしておいて、
ツールはありがたく使いましょうね。



この記事が気に入ったらサポートをしてみませんか？