toggle-mnu

toggle-mnu.css

//toggle-mnu

html:

<div class="toggle-mnu" onclick="myFunction(this)">
	<div class="bar1"></div>
	<div class="bar2"></div>
	<div class="bar3"></div>
</div>
<script>
	function myFunction(x) {
		x.classList.toggle("change");
	}
</script>

css:

.toggle-mnu {
	position: absolute;
	top: 24px;
	right: 20px;
	display: inline-block;
	cursor: pointer;
	opacity: .6;
}
.bar1,
.bar2,
.bar3 {
	width: 44px;
	height: 5px;
	background-color: white;
	margin: 7px 0;
	transition: 0.4s;
}
.change {
	.bar1 {
		transform: rotate(-45deg) translate(-9px, 7px);
	}
	.bar2 {
		opacity: 0;
	}
	.bar3 {
		transform: rotate(45deg) translate(-8px, -8px);
	}
}