.addEventListener

JavaScriptの.addEventListenerのクリックでドロワーメニュー

ドロワーメニューは多く見る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もそんなに記述量が多くないので、カスタマイズもしやすいと思います。