.classList.toggle

JavaScriptの.classList.toggleで右側から開閉するドロワメニュー

2022年5月1日 9分

引き出しのようにメニューを一覧で表示させるドロワーメニューを、ネイティブなJavaScriptで作ります。

前回は左側から開閉するドロワーメニューでしたが、この記事では右側で開閉するドロワーメニューのスニペットについて解説します。

2022年1月2日JavaScriptの.addEventListenerのクリックでドロワーメニュー

かかかず

上記のリンクは、左で開閉するドロワーメニューです。

主にスマホのヘッダーで見かけるUIですが、参考にしてみてください。

.classList.toggle
.classList.toggleで開閉するドロワーメニュー
実装の手順と方法
ざっくりとしたコードの解説
さいごに

.classList.toggle

JavaScriptの .classList.toggle は、指定した要素のclass名があった場合に、そのclass名を削除します。また、逆にそのclass名がない場合は追加するメソッドです。

const elementClass = elementNodeReference.classList;

この他に、似たようなメソッドでadd()・remove()・replace()がありますが、この記事ではclassの有無を切り替える .toggle() を使ってドロワメニューを作ります。

.classList.toggleで開閉するドロワーメニュー

早速、.classList.toggleで開閉するドロワーのサンプルです。

「ドロワーのボタン」をクリックするか、右上にあるメニューボタンをクリックすることで右からドロワーメニューが表示されます。

開いたドロワーメニューは、薄グレーのオーバーレイ・✖️に変形したメニューアイコン・ドロワー内のリンクのいずれかをクリックすることで、ドロワーメニューが閉じます。

かかかず

ドロワーが表示されると、メニューアイコンも「✖︎」に変形します。

実装の手順と方法

コードの詳細の前に、実装の手順と方法について解説していきます。

HTMLを記述

まずは、HTMLにドロワメニュー一式を記述します。記述する位置は、body タグ内へ任意の場所でOKですが、構造的にはなるべくはじめの方に記述しましょう。

コードを表示

<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 class="linkList">
      <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>

かかかず

ヘッダーメニューに使うなら、header タグの中に記述しましょう。

JavaScriptを記述

次に、JavaScriptのコードをHTMLを設置したページに記述します。

コードは <body>〜</body> で、</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")
  }

});


//ドロワーのメニューをクリックしたら非表示
const hrefLink = document.querySelectorAll('.linkList li a');
for (i = 0; i < hrefLink.length; i++) {
hrefLink[i].addEventListener("click", () => {
document.body.classList.remove("show-nav");
document.getElementById("deleteconpo").classList.toggle("deleteclass")
});
}

CSSを記述

最後に、見た目を整える為CSSを記述します。

コードを表示

/* Drawer */
.overlay {
  width: 100%;
  height: 100vh;
  position: fixed;
  right: 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: 300px;
  height: 100vh;
  background-color: #FFF;
  right: -300px;
  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: absolute;
  right: 100%;
  width: 50px;
  height: 50px;
  color: #313131;
  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: #313131;
    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 {
  right: 0;
  box-shadow: 0 2px 4px rgba(0,0,0,.6);
}
.show-nav .overlay {
  opacity: 1;
  visibility: visible;
}

かかかず

これで完成です。

ざっくりとしたコードの解説

コードは、HTML・JavaScript・CSSの3種類です。ざっくりですが、順に解説していきます。

HTML

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 class="linkList">
      <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>

JavaScript

JavaScriptは、大きく分けて「ドロワーの表示」と「ドロワーの非表示」の2つです。

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")
  }

});


//ドロワーのメニューをクリックしたら非表示
const hrefLink = document.querySelectorAll('.linkList li a');
for (i = 0; i < hrefLink.length; i++) {
hrefLink[i].addEventListener("click", () => {
document.body.classList.remove("show-nav");
document.getElementById("deleteconpo").classList.toggle("deleteclass")
});
}

特に、ドロワーの開閉にはクリックされた要素によって ifの条件分岐で分け、条件分岐させた後に .classList.toggle で処理内容をそれぞれ入れています。

またコードの最後の方には、ドロワ内の a タグがクリックされた時にドロワーが閉じるように記述しています。

CSS

JavaScriptでは、クリックでclassの付け替えをすることがメインなので、ドロワーの挙動をさせるには以下のCSSを全てコピペすればOKです。

/* Drawer */
.overlay {
  width: 100%;
  height: 100vh;
  position: fixed;
  right: 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: 300px;
  height: 100vh;
  background-color: #FFF;
  right: -300px;
  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: absolute;
  right: 100%;
  width: 50px;
  height: 50px;
  color: #313131;
  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: #313131;
    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 {
  right: 0;
  box-shadow: 0 2px 4px rgba(0,0,0,.6);
}
.show-nav .overlay {
  opacity: 1;
  visibility: visible;
}