drawer.jsでドロワーメニューをサクッと作ろう

公開日 2021/3/28

drawer.jsのインストール
HTMLにcssとjsを読み込むコードを記載する
- jsにドロワーの利用宣言文を追加する。
- bodyにドロワーのclassを追加する。
中央寄せヘッダーのドロワー実装例
HTML
scss
js

drawer.jsのインストール

http://git.blivesta.com/drawer/

zip解凍後distのなかのcssフォルダとjsフォルダの中の

drawer.js
drawer.css

ファイルを格納します。

HTMLにcssとjsを読み込むコードを記載する

追加場所・・・head内

jQueryの読み込みがまだなら
一行目のコードを記載してください。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- drawer.css -->
<link rel="stylesheet" href="./css/drawer.css">
<!-- drawer.js -->
<script src="./js/drawer.js" defer></script>

jsにドロワーの利用宣言文を追加する。

//ドロワーメニューの利用宣言
$(document).ready(function() {
  $('.drawer').drawer();
});

bodyにドロワーのclassを追加する。

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

drawer–right・・・ハンバーガーメニューが右
drawer–left・・・ハンバーガーメニューが左

中央寄せヘッダーのドロワー実装例

HTML

ov　はメニューが開いたときの
左側の黒のオーバーレイ

<header id="js-header" class="header">
        <div class="header-drawer">
            <h1 class="header-logo">Sample Corp.</h1>
            <button type="button" class="drawer-toggle drawer-hamburger">
                <span class="sr-only">toggle navigation</span>
                <span class="drawer-hamburger-icon"></span>
            </button>
            <div class="ov drawer-toggle">
            </div>
            <nav class="drawer-nav">
                <ul class="drawer-menu">
                    <li><a class="drawer-menu-item" href="#news">News</a></li>
                    <li><a class="drawer-menu-item" href="#service">Service</a></li>
                    <li><a class="drawer-menu-item" href="#results">Results</a></li>
                    <li><a class="drawer-menu-item" href="#price">Price</a></li>
                    <li><a class="drawer-menu-item" href="#comments">Comments</a></li>
                    <li><a class="drawer-menu-item" href="#qa">Q&A</a></li>
                    <li><a class="drawer-menu-item" href="#contact">Contact</a></li>
                </ul>
            </nav>
        </div>
        <nav class="header-nav">
            <ul class="header-nav-list">
                <li class="header-nav-item"><a class="header-nav-item-link" href="#news">News</a></li>
                <li class="header-nav-item"><a class="header-nav-item-link" href="#service">Service</a></li>
                <li class="header-nav-item"><a class="header-nav-item-link" href="#results">Results</a></li>
                <li class="header-nav-item"><a class="header-nav-item-link" href="#price">Price</a></li>
                <li class="header-nav-item"><a class="header-nav-item-link" href="#comments">Comments</a></li>
                <li class="header-nav-item"><a class="header-nav-item-link" href="#qa">Q&A</a></li>
                <li class="header-nav-item"><a class="header-nav-item-link" href="#contact">Contact</a></li>
            </ul>
        </nav>
</header>

scss

PC時はドロワーメニューは　display: none;　
で非表示に

スマホ・タブレット時に　display: blok;
で表示させる

/*header*/
header {
    background-color: #d2d4d8;
    position: fixed;
    z-index: 100;
    width: 100%;

    .header-nav {
        margin: 0 auto;
        text-align: center;
        @include mq(md) {
            display: none;
        }
        .header-nav-list {
            display: inline-flex;
            margin-left: 17px;
            .header-nav-item {
                a {
                    padding: 30px 21px;
                    display: block;
                    font-family: $font-family-en;
                    font-size: 16px;
                    letter-spacing: -0.04em;
                    &:hover {
                        opacity: 0.8;
                    }
                }
                &:first-child a {
                    padding-left: 0;
                    padding-right: 20px;
                }
                &:last-child a {
                    padding-left: 20px;
                    padding-right: 0;
                }
            }
        }
    }
}

/* drawer-nav */

.header-drawer {
    display: none;
}
.drawer-open .ov {
    position: fixed;
    width: 100%;
    height: 100vh;
    background-color: #3e3e3e;
    opacity: 0.7;
    top: 0;
    z-index: 1;
}

@include mq(md) {
    header {
        background-color: #fff;
        height: 68px;
        .drawer-hamburger {
            padding-right: 1.75rem;
        }
        .drawer-hamburger-icon,
        .drawer-hamburger-icon:before,
        .drawer-hamburger-icon:after {
            height: 4px;
            width: 26px;
            border-radius: 40px;
            background-color: #3d3d3d;
        }

        .header-drawer {
            display: block;
            background-color: #fff;
            height: 68px;

            h1 {
                position: absolute;
                z-index: 98;
                width: 200px;
            }
            .drawer-nav {
                padding-top: 145px;
                text-align: center;
                background-color: #fff;
                opacity: 1 !important;
                ul li a {
                    padding: 16px;
                    font-family: $font-family-en;
                }
                @include mq(xs) {
                    padding-top: 45px;
                }
            }
        }
        .header-drawer::after {
            position: absolute;
            height: 500px;
            width: 500px;
            background-color: #3e3e3e;
        }
    }

    .drawer-open {
        .header-drawer::after {
            position: absolute;
            height: 100px;
            width: 100px;
            background-color: #3e3e3e;
        }
        .drawer-hamburger-icon::after,
        .drawer-hamburger-icon::before {
            background-color: #fff;
        }
        .drawer-overlay {
            display: none;
        }
    }
}

js

メニューがクリックされたら
スムーススクロールで指定のidまで移動する

// #から始まるURLがクリックされた時
$(function () {
  $('a[href^=#]').click(function () {
      var adjust = -66;
      var speed = 400;
      var href = $(this).attr("href");
      var target = $(href == "#" || href == "" ? 'html' : href);
      var position = target.offset().top + adjust;
      $('body,html').animate({ scrollTop: position }, speed, 'swing');
      return false;
  });
});