【JavaScript】ボタンをクリックしたら表示し、ボタン以外の箇所をクリックすると非表示になるメニュー

スマホのハンバーガーメニューなど特にスマホ向けのデザインで
ボタンをクリックすることで表示するメニューのご紹介です。

ポイントとなるのはボタンをクリックするとメニューが表示することに加えて、
ボタン以外をクリックした場合にはメニューが非表示になるという仕様です。

JavaScriptでこれを実現する場合、closestメソッドを利用することで
比較的かんたんに実現できます。

目次

• 実装した結果

• 実際のコードと解説

  • HTML
  • CSS
  • JavaScript

• 最後に

実装した結果

実際のコードと解説

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のサンプルコードを参考にご自身のプロジェクトにあわせて
適宜調整いただければ幸いです。