如何添加X微调型汉堡菜单

Question

嘿，所有人都有此菜单，我希望单击X并再次返回到汉堡样式。

有人可以帮我吗？我只是不知道如何实现。在这里分享我的菜单代码。希望有专家可以帮助我。

这是我的菜单代码

	$(document).ready(function() {
	$('#menulink').click(function(event) {
		event.preventDefault();
		if($('.navigation-wrapper').hasClass('show-menu')) {
			$('.navigation-wrapper').removeClass('show-menu');
			$('.navigation').hide();
			$('.navigation li').removeClass('small-padding');
		} else {
			$('.navigation-wrapper').addClass('show-menu');
			$('.navigation').fadeIn();
			$('.navigation li').addClass('small-padding');
	   }
	});
  
});

.hamburger-wrapper {
	padding: 0;
	background: #000;
	position: fixed;
	top: 40px;
	left:90px;
	width: 50px;
	z-index: 999;
}

.inner-hamburger-wrapper {
	background: #ca1404;
	width: 100%;
	padding: 8px 0;
}

.hamburger {
	width: 50%;
	height: 3px;
	margin: 4px auto;
	background: #fff;
	border-radius: 2px;
}

.menu-title {
	position: absolute;
	top: 10px;
	right: 0;
	width: 50%;
}

.menu-title p {
	color: #fff;
	font-size: 18px;
	line-height: 22px;
	text-align: center;
}

.navigation-wrapper {
	background: linear-gradient(180deg, #C7100C 0%, #3F5EFB 100%);
	padding: 40px 0 0 0;
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 900;
	display: none;
}

.navigation {
	padding: 50px 5% 0 5%;
	display: none;
}

.show-menu {
	display: block;
}

.navigation li {
	list-style: none;
	margin: 50px 0;
	transition: all ease .6s;
} .navigation li.small-padding {
	margin: 0;
  }

.navigation li a {
	display: block;
	padding: 10px 0 10px 1%;
	color: #fff !important;
	text-decoration: none;
	font-size: 150%;
	letter-spacing: .1em;
	border-left: 3px solid #000;
	-moz-transition: all ease .3s;
	-webkit-transition: all ease .3s;
	-ms-transition: all ease .3s;
	-o-transition: all ease .3s;
	transition: all ease .3s;
}

.navigation li a:hover {
	color: #fff;
	padding-left: 2%;
	border-left: 3px solid #eee;
}

@media (min-width: 320px) and (max-width: 768px) {
.hamburger-wrapper {
	padding: 0;
	background: #000;
	position: fixed;
	top: 30px;
	left:5px;
	width: 50px;
	z-index: 999;
}

.navigation li a {
	display: block;
	padding: 10px 0 10px 1%;
	color: #bbb;
	text-decoration: none;
	font-size: 90%;
	letter-spacing: .1em;
	border-left: 3px solid #000;
	-moz-transition: all ease .3s;
	-webkit-transition: all ease .3s;
	-ms-transition: all ease .3s;
	-o-transition: all ease .3s;
	transition: all ease .3s;
	border-bottom: 1px solid rgba(255, 255, 
}
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a id="menulink" href="#">
	<div class="hamburger-wrapper">
		<div class="inner-hamburger-wrapper">
			<div class="hamburger"></div>
			<div class="hamburger"></div>
			<div class="hamburger"></div>
		</div>
	</div>
</a>

<div class="navigation-wrapper">

	<ul class="navigation">
        <li><a href="#">Home</a></li>
        <li><a href="#">Website Design</a></li>
        <li><a href="#">Search Engine Optimization</a></li>
        <li><a href="#">User Experience</a></li>
        <li><a href="#">AB Testing</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
</div>

非常感谢您的帮助。

提前感谢

Answer 1

您应该执行以下操作：

1. 在活动时将类似“活动”的类添加到汉堡包按钮（Jquery> toggleClass）
2. 按钮中的三行可以通过分别为它们创建类来进行动画处理：＃menulink.active .hamburger-wrapper .inner-hamburger-wrapper div：nth-​​of-type（1）{}
3. 在每个.hamburger元素上具有过渡和旋转：2个十字，1个消失。