Über basic Hamburger Nav...seriously feel free to contribute and make this suck less.

hamburger-nav.html

<!-- The website logo and hamburger icon -->
<div class="mobileNavWrap">
	<div class="mobileLogo">
		<a href="#"><img src="/some-logo.png" alt="some website" height="100" width="100" /></a>
	</div>
	<div id="mobileNavIcon">
		&#x2261;
	</div>
</div>

<!-- The nav menu -->
<nav>
	<ul class="mobileNav">
		<li><a href="#">Home</a></li>
		<li><a href="#">Link</a></li>
		<li><a href="#">Link</a></li>
		<li><a href="#">Link</a></li>
		<li><a href="#">Link</a></li>
	</ul>
</nav>

hamburger-nav.js

<script type="text/javascript">
jQuery(document).ready( function($) {

	// Display hamburger navigation
	$('#mobileNavIcon').click(function() {
		$('.mobileNav').slideToggle();
		return false;
	});

	// Toggle hamburger nav drop-down items
	$('.mobileNav').find('> li').click(function() {
		$('.mobileNav > li').not(this).find('ul').slideUp();
		$(this).find('ul').stop(true, true).slideToggle(400);
			return false;
	});

});
</script>

hamburger-nav.scss

/* Hamburger Nav styles */
.mobileLogo {
	display: block;
	height: 20px;
	margin: -3px auto;
	padding: 0;
	text-align: center;
	width: 146px;
}

#mobileNavIcon {
	background: url(images/some-logo.png) center center black;
	color: white;
	display: block;
	font-size: 30px;
	height: 40px;
	line-height: 38px;
	margin: -27px 0 0 0;
	padding: 0 0 0 8px;
}

.mobileNav {
	margin: 0;

	li {
		border-bottom: 1px solid #4e7d8c;
		display: block;
		margin: 0;
		padding: 10px;
		text-align: left;
		width: 100%;
	}

	.sub-menu li {
		margin: 0 0 0 24px;
		
		a {
			font-size: 20px;
		}
	}

	a {
		color: #fff;
		font-size: 20px;
		margin: 0;
		width: 50%;
		
	}

}


/* Hide for desktops */
@media only screen and (min-width: 768px) {

	#mobileNavIcon,
	.mobileLogo,
	.mobileNav,
	.mobileNav .sub-menu {
		display: none;
	}

}