<div class="toggle_btn">
  <span class="sandwich">
    <span class="sw-topper"></span>
    <span class="sw-bottom"></span>
    <span class="sw-footer"></span>
  </span>
</div>

main.css                   ---------------------------------
.toggle_btn {
display: none;
height: 30px;
width: 30px;
position: absolute;
z-index: 200;
top: 22px;
right: 25%;
left: auto;
background-color: #00899d;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
}
.toggle_btn .sandwich {
	width: 30px;
  height: 30px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.toggle_btn .sandwich span {
	height: 2px;
    width: 24px;
    position: relative;
    border-radius: 2px;
    left: 3px;
    background-color: #fff;
    display: block;
}
.toggle_btn .sandwich span.sw-topper {
	top: 6px;
    transition: transform 0.3s, top 0.2s;
}
.toggle_btn .sandwich span.sw-bottom {
	top: 12px;
    transition: transform 0.3s, top 0.2s;
    transition-delay: 0.1s, 0s;
}
.toggle_btn .sandwich span.sw-footer {
	top: 18px;
    transition: all 0.5s;
    transition-delay: 0.1s;
}
.toggle_btn .sandwich.active .sw-topper {
	top: 15px;
	-moz-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
.toggle_btn .sandwich.active .sw-bottom {
	top: 13px;
	-moz-transform: rotate(45deg);
	transform: rotate(45deg);
}
.toggle_btn .sandwich.active .sw-footer {
	opacity: 0;
	top: 0;
	transform: rotate(180deg);
}

media.css                       ===================
.toggle_btn {
  display: block;
}

js                          ========================
$('.toggle_btn').click(function(){
		$(".sandwich").toggleClass("active");
		if($('.menu').is(':visible')) {
			$('.menu').slideUp(300);
		} else {
			$('.menu').slideDown(300);
		};
	});