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.jsのFAQにコードとともに記載があるため、興味がある方はカスタマイズも是非試してみてくださいね。
▼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』
です。
ありがとうございます♪
