javascript単体で動作するドロワーメニューを実装しよう -Slideout.js-

Slideout.jsを使用したjavascript単体で動作するドロワーメニューを実装してみましょう!


Slideout.jsを使えばシンプルなコードでjQueryに依存しないスライドアニメーションのドロワーメニューが実装可能です!
とてもなめらかな動きかつ軽量なので使いやすさ◎です。

今回のデモではハンバーガーメニューアイコンとアニメーションも
CSSと数行のjavascriptだけで実装しているので合わせてご紹介いたします♪

Slideout.jsの使い方

まずはSlideout.jsからSlideout.jsのファイル一式をDLします。

DLしたファイルの中の

  • index.css
  • slideout.min.js

 は外部リンクを貼って利用します。
以下のコードをドロワーメニューを実装したいhtmlファイルに記述します。

▼HTML

<head>
  ...
  <link rel="stylesheet" href="index.css">
</head>
<body>
  ...
  <script src="dist/slideout.min.js"></script>
</body>

次に、ナビゲーション(#menu)とコンテンツ(#panel)の記述をします。
※idは任意の文字列に変更可能です。

▼HTML

    <nav id="menu">
        <h2>Menu</h2>
        <ul>
            <li>menu1</li>
            <li>menu2</li>
            <li>menu3</li>
        </ul>
    </nav>
   
    <main id="panel">
        <header>
            <div class="toggle-button menuWrapper">
                <a href="#menu" id="menuButton"><span>MENU</span></a>
            </div>
        </header>
    </main>

続いて、JavaScriptのオプションを指定します。
簡単な設定はSlideout.jsFAQにコードとともに記載があるため、興味がある方はカスタマイズも是非試してみてくださいね。

▼JavaScript

<script>
        var slideout = new Slideout({
            'panel': document.getElementById('panel'),
            'menu': document.getElementById('menu'),
            'padding': 256,
            'tolerance': 70
        });

        // Toggle button
        document.querySelector('.toggle-button').addEventListener('click', function() {
            slideout.toggle();
        });
    </script>

Slideout.jsでドロワーメニューを実装する設定は以上です。

今回のデモではハンバーガーボタンのアニメーション用にCSSとJavaScriptを使用しています。
合わせて設定してみてくださいね。

▼CSS

/*ハンバーガーメニューアイコン*/

.menuWrapper {
    position: relative;
    z-index: 0;
    border: 0;
    width: 50px;
    height: 50px;
}

#menuButton {
    overflow: hidden;
    display: block;
    position: relative;
    z-index: 0;
    width: 50px;
    height: 50px;
    cursor: pointer;
}

#menuButton span,
#menuButton::before,
#menuButton::after {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 36px;
    height: 4px;
    margin: auto;
    background: #000;
}

#menuButton span {
    overflow: hidden;
    z-index: 1;
    color: #000;
}

#menuButton::before {
    z-index: 2;
    transform: translate(0, -12px);
    content: "";
}

#menuButton::after {
    z-index: 2;
    transform: translate(0, 12px);
    content: "";
}

/*アニメーション*/

#menuButton span {
    transition: transform 150ms 50ms;
}

#menuButton::before,
#menuButton::after {
    transition: transform 200ms;
}

#menuButton.active span {
    transform: translate(-50px, 0);
    transition: transform 150ms;
}

#menuButton.active::before {
    transform: rotate(45deg);
}

#menuButton.active::after {
    transform: rotate(-45deg);
}

▼JavaScript

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            document.getElementById('menuButton').addEventListener('click', function(ev) {
                ev.preventDefault();
                this.classList.toggle('active');
            });
        });
    </script>

今回、参考にさせていただいたのは、
『Slideout.js』
『コリス』
『Qiita』
です。
ありがとうございます♪

デモページは、こちら