2022/06/06 

Toggle（トグル）とは？

toggleは、クリックなどの同じ操作によって、
二つの状態を交互に切り替えられるような仕組みのことです。
このtoggleをどんな用途で使用できるか調べてみたのですが、一つの例としてハンバーガーメニューで使用できます。

以下ようにHTMLとCSSでハンバーガーメニューを作成します。

<div id="nav-container" class="nav-container">
　　<!--  メニュー表示（省略） -->
</div>
<div id="hamburger">
		<span id="line1" class="inner_line"></span>
		<span id="line2" class="inner_line"></span>
		<span id="line3" class="inner_line"></span>
</div>

クラス nav-container は てハンバーガーメニュー にOn/Offに連動したメニューです。

メニューの最初の表示位置で-100%で表示位置から外しておきます。これによって最初メニューは表示されません。

クラス nav-container_open は ハンバーガーメニュー でメニューがOnされたとき、メニューを表示するための追加クラスです。

.nav-container {
	transform: translateX(-100%);
	transition: 0.5s;
}
.nav-container_open {
	transform: translateX(0);
	opacity: 1;
	transition: 0.5s;
}
#hamburger {
	display: block;
	position: absolute;
	top: 70px;
	left: 10px;
	width: 40px;
	height: 24px;
	cursor: pointer;
}
#line1 {
	top: 0;
	transition: 0.1s;
}
#line2 {
	top: 10px;
	transition: 0.1s;
}
#line3 {
	bottom: 0px;
	transition: 0.1s;
}
.inner_line {
	display: block;
	position: absolute;
	left: 0;
	width: 40px;
	height: 4px;
	background-color: #000000;
	border-radius: 4px;
}

JavaScriptでhamburger( id=”hamburger” )がクリックされたら、ファンクション hamburger を呼び出します。

ファンクション hamburger を呼び出すと、toggleでクラスの追加と削除が交互に繰り返します。

<script>
	function hamburger() {
		document.getElementById('line1').classList.toggle('line1');
		document.getElementById('line2').classList.toggle('line2');
		document.getElementById('line3').classList.toggle('line3');
		document.getElementById('nav-container').classList.toggle('nav-container_open');
	}

	document.getElementById('hamburger').addEventListener('click' , function () {
		hamburger();
	} );
</script>

toggleによってクラスが追加された場合、ラインを以下の図のようにCSSで変化させます。#line2は透過に消します。

.line1 {
	/*-45度回転させる*/
	transform: translateY(10px) rotate(-45deg);
	top: 0;
 	transition: 0.1s;
}
.line2 {
	/*消す*/
	opacity: 0;
	transition: 0.1s;
}
.line3 {
	/*45度回転させる*/
	transform: translateY(-11px)  rotate(45deg);
	bottom: 0;
	transition: 0.1s;
}

すべてのHTML/JavaScript/CSSが完成すると以下のような感じになります。

みなさんよかったら試してみてください！