Animated Sandwich Button (3 horizontal dashes transforms into cross)

Animated Sandwich Button.js

$("#sandwich, .menu_item").click(function() {
  $("#sandwich").toggleClass("active");
});

Animated Sandwich Button

<div id='sandwich'>
  <div class='sw-topper'></div>
  <div class='sw-bottom'></div>
  <div class='sw-footer'></div>
</div>

sass

$w: 32px
$h: 4px

//if we don't use divs in html file
#sandwich, .sw-topper, .sw-bottom, .sw-footer
	display: block

.sw-topper, .sw-bottom, .sw-footer
	width: $w
	height: $h
	position: relative
	background: rgb(255, 255, 255)
	border: none
	border-radius: 4px 4px 4px 4px

#sandwich
	width: $w
	height: $w
	position: absolute
	top: 0
	bottom: 0
	left: 0
	right: 0
	margin: auto
	z-index: 200
.sw-topper
	top: 0
	transition: transform 0.5s, top 0.2s
	//transition-delay: 0.2s, 0s
.sw-bottom
	top: $h * 2
	transition: transform 0.5s, top 0.2s
	transition-delay: 0.2s, 0s
.sw-footer
	top: $h * 4
	transition: all 0.5s
	transition-delay: 0.1s

#sandwich.active
	.sw-topper
		top: 9px
		transform: rotate(135deg)
	.sw-bottom
		top: 5px
		transform: rotate(-135deg)
	.sw-footer
		opacity: 0
		top: 0
		transform: rotate(180deg)