Как добавить гамбургер-меню типа X spinner

Question

Привет, у всех есть это меню, в котором я sh должен переключаться по нажатию 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. добавить класс, например 'active', к кнопке гамбургера, когда она активна (Jquery> toggleClass)
2. три строки в кнопку можно анимировать отдельно, создав классы для каждой из них: # menulink.active .hamburger-wrapper .inner-hamburger-wrapper div: nth-of-type (1) {}
3. имеют переходы и вращение каждый элемент .hamburger: 2 образуют крест, 1 исчезает.