[Hambureger menu] #css #mobileMenu

index.html

<div class="menu-wrapper">
  <div class="hamburger-menu"></div>	  
</div>

index.js

(function () {
	$('.menu-wrapper').on('click', function() {
		$('.hamburger-menu').toggleClass('animate');
	})
})();

style.scss

$bar-width: 40px;
$bar-height: 4px;
$bar-spacing: 10px;
$bar-radius: 3px; // if 0 then remove value
$bar-color: #fff;


.menu-wrapper {	
	width: $bar-width;
	height: $bar-height + $bar-spacing*2;
	cursor: pointer;
}

.hamburger-menu,
.hamburger-menu:after,
.hamburger-menu:before {
	width: $bar-width;
	height: $bar-height;
	@if $bar-radius > 0 {
		border-radius: $bar-radius;
	}
}

.hamburger-menu {
	position: relative;
	transform: translateY($bar-spacing);
	background: $bar-color;
	transition: all 0ms 300ms;

	&.animate {
		background: rgba(255, 255, 255, 0);
	}
}

.hamburger-menu:before {
	content: "";
	position: absolute;
	left: 0;
	bottom: $bar-spacing;
	background: $bar-color;
	transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
}

.hamburger-menu:after {
	content: "";
	position: absolute;
	left: 0;
	top: $bar-spacing;
	background: $bar-color;
	transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
}

.hamburger-menu.animate:after {
	top: 0;
	transform: rotate(45deg);
	transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
	;
}

.hamburger-menu.animate:before {
	bottom: 0;
	transform: rotate(-45deg);
	transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
	;
}