javascript 菜单汉堡动画

Posted 2021-05-03

<div id="burger-btn">
	<div id="burger-lines">
		<span class="burger-line"></span>
		<span class="burger-line"></span>
		<span class="burger-line"></span>
	</div>
	<div id="burger-cross">
		<span class="burger-line"></span>
		<span class="burger-line"></span>
	</div>
	<span id="burger-text">Menu</span>
</div>

#burger-btn, #burger-btn span, #site-navigation {
  transition: all 400ms ease-in-out;
}

#burger-btn {
	position: fixed;
	top: 3%;
	right: 3%;
	border: 1px solid rgb(199, 88, 14);
	height: 60px;
	width: 60px;
	box-sizing: border-box;
	padding: 20px;
	cursor: pointer;
	transition-delay: 400ms;
	z-index: 100;
}

#burger-btn:hover {
	transform: rotate(180deg);
	transition-delay: 0ms;
}

#burger-btn:active {
	transform: rotate(180deg) scale(0.9);
}

#burger-btn #burger-lines, #burger-btn #burger-cross {
	display: flex;
	flex-flow: column;
	justify-content: space-around;
	align-items: center;
	width: 100%;
	height: 100%;
}

#burger-btn #burger-cross {
	position: absolute;
  top: 0;
  left: 0;
	opacity: 0;
	justify-content: center;
	box-sizing: border-box;
	padding: 20px;
}

#burger-btn.active #burger-lines { opacity: 0; }
#burger-btn.active #burger-cross { opacity: 1; }

#burger-btn .burger-line {
	display: block;
	width: 100%;
	height: 1px;
	background-color: white;
	transition-delay: 400ms;
}

#burger-btn:hover .burger-line {
	width: 0%;
	transition-delay: 0ms;
}

#burger-btn #burger-cross .burger-line:first-child {
	transform: rotate(45deg) translateX(1px);
}

#burger-btn #burger-cross .burger-line:last-child {
	transform: rotate(-45deg);
}

#burger-btn #burger-text {
	position: absolute;
  top: 0;
  left: 0;
	opacity: 0;
	height: 100%;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition-delay: 0ms;
	transform: rotate(-180deg);
}

#burger-btn:hover #burger-text {
	opacity: 1;
	transition-delay: 400ms;
}

#site-navigation {
	position: fixed;
	top: 0;
	right: -300px;
	height: 100%;
	width: 300px;
	background-image: background-image: linear-gradient(to right, rgb(30, 28, 39), rgb(32, 30, 42), rgb(34, 31, 45), rgb(36, 33, 49), rgb(38, 35, 52));
	background-color: rgb(30, 28, 39);
}

#site-navigation.active {
	right: 0;
}

$('#burger-btn').click(function() {
	$('#burger-btn, #site-navigation').toggleClass('active');
});