ホームページ制作のご依頼・ご相談はCOLERSへ

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

  • HTML
  • JS

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

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

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

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