Animated Hamburger Menu

by jorgeluis

HTML

<div class="header" id="page-header">

	<div class="hamburger-icon" id="hamburger-icon">
		<svg class="inline-svg" xmlns="http://www.w3.org/2000/svg" width="50" height="34" viewBox="0 0 32 22.5">
			<style>
				.a {
					fill: #dc2763;
				}
			</style>
			<g class="svg-menu-toggle">
				<path class="bar bar-1" d="M20.9 8.8c0 0.7-0.5 1.3-1.1 1.3H3.1c-0.6 0-1.1-0.6-1.1-1.2l0 0c0-0.7 0.5-1.2 1.1-1.2h16.7C20.4 7.5 20.9 8.1 20.9 8.8L20.9 8.8z"
				class="a" />
				<path class="bar bar-2" d="M20.9 15c0 0.7-0.5 1.3-1.1 1.3H3.1C2.5 16.3 2 15.7 2 15l0 0c0-0.7 0.5-1.2 1.1-1.2h16.7C20.4 13.8 20.9 14.3 20.9 15L20.9 15z"
				class="a" />
				<path class="bar bar-3" d="M21 21.3c0 0.7-0.5 1.3-1.1 1.3H3.2c-0.6 0-1.1-0.6-1.1-1.2l0 0c0-0.7 0.5-1.2 1.1-1.2h16.7C20.5 20 21 20.6 21 21.3L21 21.3z"
				class="a" />
				<rect width="45" height="30" fill="none" /> 
			</g>
		</svg>
	</div>

	<nav id="main-menu" class="nav--stacked">
		<ul class="">
			<li class="menu-item">
				<a href="#">I</a>
			</li>
			<li class="menu-item">
				<a href="#">solemnly</a>
			</li>
			<li class="menu-item">
				<a href="#">swear</a>
			</li>
			<li class="menu-item">
				<a href="#">I</a>
			</li>
			<li class="menu-item">
				<a href="#">am</a>
			</li>
			<li class="menu-item">
				<a href="#">up</a>
			</li>
			<li class="menu-item">
				<a href="#">to</a>
			</li>
			<li class="menu-item">
				<a href="#">no</a>
			</li>
			<li class="menu-item">
				<a href="#">good.</a>
			</li>
		</ul>
	</nav>
</div>

SCSS

.nav--stacked {
	background-color: tomato;
  ul {
    list-style: none;
    padding: 0; margin: 0;
  }
	a, a:visited {
		display: block;
		padding: 1em 1.5em;
		background-color: tomato;
		font-weight: bold;
		text-transform: uppercase;
		text-decoration: none;;
		color: white;
		-webkit-transition: background-color 0.3s ease-out;
		transition: background-color 0.3s ease-out;
    font-family: sans-serif;
	}
	a:hover, a:active, a:focus {
		color: white;
		background-color: rgba(0, 0, 0, 0.2);
	}
}

.header .nav--stacked {
	display: block;
	position: absolute;
	top: 50px;
	left: -300px;
	opacity: 0;
	width: 300px;
	overflow-y: scroll;
	-webkit-transition: left 0.2s ease-out, opacity 0.5s ease-out;
	transition: left 0.2s ease-out, opacity 0.5s ease-out;
}
.menu-active .nav--stacked {
	left: 0;
	opacity: 1.0;
}

.hamburger-icon {
	position: absolute;
	top: 4px;
	left: 15px;
	z-index: 4;
	padding-bottom: 20px;

	.svg-menu-toggle {
		fill: #222;
		pointer-events: all;
		cursor: pointer;
		.bar {
			-webkit-transform:rotate(0) translateY(0) translateX(0);
			transform:rotate(0) translateY(0) translateX(0);
			opacity:1;
			-webkit-transform-origin: 20px 10px;
			transform-origin: 20px 10px;
			-webkit-transition: -webkit-transform 0.4s ease-in-out, opacity 0.2s ease-in-out, fill 0.4s ease-in-out;
			transition: transform 0.4s ease-in-out, opacity 0.2s ease-in-out, fill 0.4s ease-in-out;
		}
		.bar:nth-of-type(1) {
			-webkit-transform-origin: 20px 10px;
			transform-origin: 20px 10px;
		}
		.bar:nth-of-type(3) {
			-webkit-transform-origin: 20px 20px;
			transform-origin: 20px 20px;
		}

		.menu-active & {
			.bar:nth-of-type(1) {
			  fill: tomato;
				-webkit-transform:rotate(-45deg) translateY(0) translateX(0);
				transform:rotate(-45deg) translateY(0) translateX(0);
			}
			.bar:nth-of-type(2) {
				opacity:0;
			}
			.bar:nth-of-type(3) {
			  fill: tomato;
				-webkit-transform:rotate(45deg) translateY(0em) translateX(0em);
				transform:rotate(45deg)...

JavaScript

jQuery(document).ready(function($) {

	var header = $('#page-header');
  var hamburger_icon = $('#hamburger-icon');
  var main_menu = document.getElementById('main-menu');
  main_menu.style.maxHeight = (window.innerHeight - 50) + 'px';
  hamburger_icon.on('click', function() {
    header.toggleClass('menu-active');
  });

});