ドロワーメニューは多く見るUIで、ボタンをクリックすると横からスライドしてメニューなどのコンテンツを出すことができます。
jQueryライブラリDrawerのコピペでできるドロワーメニュー
jQueryライブラリ「Drawer」と同じものをJavaScriptで作ってみました。
この記事は、.addEventListenerを使ったネイティブJavaScriptのドロワーメニューです。
.addEventListener
JavaScriptではこのイベントを検知し、検知したイベントの情報を使ってさまざまな処理ができます。
イベントを検知するための仕組みが .addEventListener で、JavaScriptからさまざまなイベント処理を実行することができるメソッドです。
イベントリスナって読むみたいです。
「イベントを検知→検知したイベントの情報をもとに処理」という流れはさまざまな場面で応用可能で、この記事ではクリックイベントで発動するスニペットになっています。
.addEventListenerクリックを使ったドロワーのサンプル
早速、.addEventListenerクリックを使ったドロワーのサンプルです。
以下のボタンクリックか、左上のメニューボタンをクリックすることで左からドロワーメニューが表示されます。
ドロワーが表示されると、メニューアイコンも「✖︎」に変形するようにしています。
ドロワーのコード
HTMLは「toggle」のclassを持つdivタグがドロワーを表示させるトリガーで、li のリストタグにはドロワーの中に表示されるメニューとなっています。
<div class="overlay"></div>
<nav class="nav">
<div class="toggle">
<span id="deleteconpo" class="toggler"></span>
</div>
<div class="logo">
<a href="#">LOGO</a>
</div>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>このようにHTMLは簡単な構造になっています。
JavaScriptは、.addEventListener のクリックイベントで「show-nav」のclassをbody タグにトグルで付与します。
const toggler = document.querySelector(".toggle");
window.addEventListener("click", event => {
if(event.target.className == "toggle" || event.target.className == "toggle") {
document.body.classList.toggle("show-nav");
document.getElementById("deleteconpo").classList.toggle("deleteclass")
} else if (event.target.className == "overlay") {
document.body.classList.remove("show-nav");
document.getElementById("deleteconpo").classList.toggle("deleteclass")
}
});ifの条件分岐で、.classList.toggle もそれぞれ入れています。
CSS
JavaScriptでは、クリックでclassの付け替えをすることがメインなので、ドロワーの挙動をさせるには以下のCSSを全てコピペすればOKです。
/* Drawer */
.overlay {
width: 100%;
height: 100vh;
position: fixed;
left: 0;
top: 0;
background-color: rgba(0,0,0,.3);
z-index: 190;
opacity: 0;
visibility: hidden;
transition: all 200ms ease-in;
}
nav.nav {
width: 270px;
height: 100vh;
background-color: #FFF;
left: -270px;
top: 0;
position: fixed;
padding: 20px 0;
transition: all 200ms ease-in-out;
z-index: 199;
}
nav.nav ul {
border: none;
padding: 0;
}
.toggle {
position: relative;
left: 100%;
width: 50px;
height: 50px;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
cursor: pointer;
}
span.toggler,
span.toggler:before,
span.toggler:after {
content: '';
display: block;
height: 3px;
width: 25px;
border-radius: 3px;
background-color: #ffffff;
position: absolute;
pointer-events: none;
}
span.toggler:before{
bottom: 9px;
}
span.toggler:after {
top: 9px;
}
span.deleteclass {
background-color: transparent;
}
span.deleteclass::before {
bottom: 0;
transform: rotate(45deg);
}
span.deleteclass::after {
top: 0;
transform: rotate(-45deg);
}
.logo {
text-align: center;
margin-bottom: 30px;
}
.logo a{
text-decoration: none;
color: #888;
font-size: 2rem;
}
.nav ul li {
display: block;
list-style: none;
margin: 0;
padding: 0;
}
.nav ul li a {
padding: 10px 20px;
display: block;
color: #313131;
font-size: 1rem;
text-decoration: none;
transition: all 200ms ease;
}
.nav ul li a:hover {
background-color: #f1f1f1;
}
/* Show Nav */
.show-nav .nav {
left: 0;
box-shadow: 0 2px 4px rgba(0,0,0,.6);
}
.show-nav .overlay {
opacity: 1;
visibility: visible;
}割合CSSもそんなに記述量が多くないので、カスタマイズもしやすいと思います。
