Full Page Nav

by bizamajig

HTML

<a id="menulink" href="#">
	<div class="hamburger-wrapper">
		<div class="inner-hamburger-wrapper">
			<div class="hamburger"></div>
			<div class="hamburger"></div>
			<div class="hamburger"></div>
		</div>
		<div class="menu-title"><p>Menu</p></div>
	</div>
</a>

<div class="navigation-wrapper">

	<ul class="navigation">
        <li><a href="#">Home</a></li>
        <li><a href="#">Website Design</a></li>
        <li><a href="#">Search Engine Optimization</a></li>
        <li><a href="#">User Experience</a></li>
        <li><a href="#">AB Testing</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
</div>

CSS

* {
	padding: 0;
	margin: 0;
	font-family: 'Josefin Sans', sans-serif;
}

.hamburger-wrapper {
	padding: 0;
	background: #000;
	position: fixed;
	top: 10px;
	left: 0;
	width: 130px;
	z-index: 999;
}

.inner-hamburger-wrapper {
	background: #ca1404;
	width: 50%;
	padding: 8px 0;
}

.hamburger {
	width: 50%;
	height: 3px;
	margin: 4px auto;
	background: #fff;
	border-radius: 2px;
}

.menu-title {
	position: absolute;
	top: 10px;
	right: 0;
	width: 50%;
}

.menu-title p {
	color: #fff;
	font-size: 18px;
	line-height: 22px;
	text-align: center;
}

.navigation-wrapper {
	background: #000;
	background: rgba(0, 0, 0, .9);
	padding: 40px 0 0 0;
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 900;
	display: none;
}

.navigation {
	padding: 20px 5% 0 5%;
	display: none;
}

.show-menu {
	display: block;
}

.navigation li {
	list-style: none;
	margin: 50px 0;
	transition: all ease .6s;
} .navigation li.small-padding {
	margin: 0;
  }

.navigation li a {
	display: block;
	padding: 10px 0 10px 1%;
	color: #bbb;
	text-decoration: none;
	font-size: 150%;
	letter-spacing: .1em;
	border-left: 3px solid #000;
	-moz-transition: all ease .3s;
	-webkit-transition: all ease .3s;
	-ms-transition: all ease .3s;
	-o-transition: all ease .3s;
	transition: all ease .3s;
}

.navigation li a:hover {
	color: #fff;
	padding-left: 2%;
	border-left: 3px solid #eee;
}

JavaScript

$(document).ready(function() {

	$('#menulink').click(function(event) {
		event.preventDefault();
		if($('.navigation-wrapper').hasClass('show-menu')) {
			$('.navigation-wrapper').removeClass('show-menu');
			$('.navigation').hide();
			$('.navigation li').removeClass('small-padding');
		} else {
			$('.navigation-wrapper').addClass('show-menu');
			$('.navigation').fadeIn();
			$('.navigation li').addClass('small-padding');
	   }
	});
  
});