【JavaScript】ボタンをクリックしたら表示し、ボタン以外の箇所をクリックすると非表示になるメニュー
スマホのハンバーガーメニューなど特にスマホ向けのデザインで
ボタンをクリックすることで表示するメニューのご紹介です。
ポイントとなるのはボタンをクリックするとメニューが表示することに加えて、
ボタン以外をクリックした場合にはメニューが非表示になるという仕様です。
JavaScriptでこれを実現する場合、closestメソッドを利用することで
比較的かんたんに実現できます。
目次
実装した結果
実際のコードと解説
HTMLとCSSはサンプルとなりますので、適宜調整していただく想定です。
HTML
<button type="button" class="btn">ボタン</button>
<nav class="nav">
<ul>
<li><a href="#1">MENU1</a></li>
<li><a href="#2">MENU2</a></li>
<li><a href="#3">MENU3</a></li>
</ul>
</nav>CSS
/* 最初は非表示、activeクラス付与でフェードイン
-----------------------------------------*/
.nav {
opacity: 0;
pointer-events: none;
transition : all .5s ease 0s;
}
.nav.active {
opacity: 1;
pointer-events: auto;
}
.btn {
cursor: pointer;
}JavaScript
仕様は以下のとおりです。
- ボタンをクリックするとメニューへ
activeクラスを付与 - ボタン以外をクリックするとメニューから
activeクラスを削除 - ボタンをクリックした際に
activeがある場合もクラスを削除
const nav = document.querySelector(".nav");
document.addEventListener("click", (e) => {
if(e.target.closest(".btn")) {
nav.classList.contains("active") ? nav.classList.remove("active") : nav.classList.add("active");
} else {
nav.classList.remove("active");
}
});closest
その名の通り指定したセレクターに対して最も近いノードを探すメソッドがclosestです。
クリックのイベント範囲をdocumentとし、クリックイベントが発生した際に、
ターゲット内にボタンとなる要素があるかで処理を分岐しています。
また、クラスの操作についてはclassListを利用することで、
クラスの付与（add）、クラスの削除（remove）、
クラスを持っているかの判定（contains）を行っています。
最後に
スマホのように横幅の小さな端末ではメニューをすべて表示することが難しく
スライドメニューやハンバーガーメニュー、オーバーレイなどを実装することが多いです。
サンプルとなるためHTMLとCSSは単純なものとしましたが、
JavaScriptのサンプルコードを参考にご自身のプロジェクトにあわせて
適宜調整いただければ幸いです。
- SNIPPET
- JavaScript
- 【JavaScript】ボタンをクリックしたら表示し、ボタン以外の箇所をクリックすると非表示になるメニュー
