html Мобильноеменю（切换按钮菜单）

Posted 2021-05-11

#toggle {
	display: none;
	width: 35px;
	height: 28px;
	padding: 14px 0 0;
	margin: 14px 0 0;
	z-index: 102;
	position: relative;
	float: right;
}
#toggle span {
	position: relative;
	display: block;
	width: 100%;
	height: 3px;
	background-color: #ffd800;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-border-radius: 2px;
	border-radius: 2px;
}
#toggle span:after,
#toggle span:before {
	content: "";
	position: absolute;
	left: 0;
	top: -9px;
}
#toggle span:after {
	top: 9px;
	width: 100%;
	height: 3px;
	background-color: #ffd800;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-border-radius: 2px;
	border-radius: 2px;
}
#toggle span:before {
	width: 100%;
	height: 3px;
	background-color: #ffd800;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-border-radius: 2px;
	border-radius: 2px;
}

/* on activation */
#toggle.on span {
	background-color: transparent;
}
#toggle.on span:before {
	background-color: #fff;
	-webkit-transform: rotate(45deg) translate(5px, 5px);
	-ms-transform: rotate(45deg) translate(5px, 5px);
	transform: rotate(45deg) translate(5px, 5px);
}
#toggle.on span:after {
	background-color: #fff;
	-webkit-transform: rotate(-45deg) translate(7px, -8px);
	-ms-transform: rotate(-45deg) translate(7px, -8px);
	transform: rotate(-45deg) translate(7px, -8px);
}

#toggle.on + #menu {
	opacity: 1;
	visibility: visible;
	-webkit-transition: opacity .4s;
	transition: opacity .4s;
	z-index: 101;
}
@media only screen and (max-width: 992px) {
	#toggle {
		display: block;
	}
	#menu {
		position: fixed;
		width: 100vw;
		min-height: 100vh;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		text-align: center;
		background-color: rgba(44, 45, 54, 0.85);
		opacity: 0;
		visibility: hidden;
		-webkit-transition: opacity .4s;
		transition: opacity .4s;
		z-index: -1;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
		-webkit-box-pack: center;
		-webkit-justify-content: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-align-content: center;
		-ms-flex-line-pack: center;
		align-content: center;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
		text-align: center;
	}
}

$(document).ready(function($) {
	$(".toggle").click(function(e) {
		e.preventDefault();
		$(this).toggleClass("on");
	});
});

<a href="#menu" id="toggle" class="toggle"><span></span></a>
<nav id="menu" class="menu">
	<ul>
		<li><a href="/">Menu item 1</a></li>
		<li><a href="/">Menu item 2</a></li>
		<li><a href="/">Menu item 3</a></li>
	</ul>
</nav>