Hamburger menu

by beliyadm

HTML

<div class="tpl_hamburger" id="sandwichmenu">
				<svg viewBox="0 0 800 600">
					<path d="M300,220 C300,220 520,220 540,220 C740,220 640,540 520,420 C440,340 300,200 300,200" class="top"></path>
					<path d="M300,320 L540,320" class="middle"></path>
					<path d="M300,210 C300,210 520,210 540,210 C740,210 640,530 520,410 C440,330 300,190 300,190" class="bottom" transform="translate(480, 320) scale(1, -1) translate(-480, -318) "></path>
				</svg>
			</div>
<div class="js_menu">
menu there
</div>

CSS

#sandwichmenu {
	margin: 5px 0 0 0;  text-align: center;
}
.tpl_hamburger svg {height: 40px;width: 60px;}
.tpl_hamburger svg {cursor: pointer;  height: 50px;  transform: translate3d(0px, 0px, 0px);  width: 80px;}
svg:not(:root) {overflow: hidden;}
.tpl_hamburger path.top, .tpl_hamburger path.bottom {
    stroke-dasharray: 240px, 950px;
}
.tpl_hamburger path {
    fill: none; stroke: #000; stroke-dashoffset: 0; stroke-linecap: round; stroke-width: 40px;
    transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25) 0s, stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25) 0s;
}
.tpl_hamburger path.middle {stroke-dasharray: 240px, 240px;}
.tpl_hamburger path {
    fill: none; stroke: #000; stroke-dashoffset: 0; stroke-linecap: round; stroke-width: 40px;
    transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25) 0s, stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25) 0s;
}

.tpl_hamburger.active path.top, .tpl_hamburger.active path.bottom {
    stroke-dashoffset: -650px;
}
.tpl_hamburger path.top, .tpl_hamburger path.bottom {
    stroke-dasharray: 240px, 950px;
}
.tpl_hamburger.active path.middle {
    stroke-dasharray: 1px, 220px;
    stroke-dashoffset: -115px;
}

.js_menu {display: none;}
.js_menu.active {display: block;}

JavaScript

$('#sandwichmenu').on('click', function(e) {
		e.preventDefault();
		$('#sandwichmenu').toggleClass("active");
    $('.js_menu').toggleClass("active");
	});