JS

ネイティブネタ帳

UI

モーダル

タブ

ドロワー

スライダー

スクロール

アコーディオン

目次

ローディングアニメーション

ツールチップ

ヘッダー

フォーム

フォーム

文字

文字の装飾

文字の操作

文字のカウント

数字の操作

ウィンドウ

ウィンドウ操作

タイトルの操作

ページ遷移時の動き

class

classの操作

要素

要素の操作

要素の追加

API

WP REST API

Google Books APIs

楽天市場API

画像・動画

画像の操作

YouTube

リンク

Google Analytics

cookie

検索

検索

お気に入り登録

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

お気に入り登録をすると、お気に入り記事一覧に登録することができます。

.addEventListener

JavaScriptの.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もそんなに記述量が多くないので、カスタマイズもしやすいと思います。