mhulse/nav.css

## nav.css
/* https://github.com/arnaudleray/pocketgrid */
.block,
.block::before,
.block::after,
.block-group,
.block-group::before,
.block-group::after  {
	-webkit-box-sizing: border-box;
	 -khtml-box-sizing: border-box;
	   -moz-box-sizing: border-box;
		-ms-box-sizing: border-box;
		 -o-box-sizing: border-box;
			box-sizing: border-box;
}
.block-group::after {
	content: "";
	display: table;
	clear: both;
}
.block-group {
	list-style-type: none;
	padding: 0;
	margin: 0;
}
.block-group > .block-group {
	clear: none;
	float: left;
	margin: 0 !important;
}
.block-group .block {
	float: left;
	width: 100%;
}
@media screen and (min-width: 48em) {
	.block-group .block { width: 33.333%; }
}

.masthead {
	position: relative;
	height: 4.1em;
}
@media screen and (min-width: 48em) {
}

/* https://github.com/yahoo/pure */
/* Menu structure: */
.menu-list,
.menu-item { position: relative; }
.menu-list {
	margin: 0;
	padding: 0;
}
.menu-item {
	list-style: none;
	padding: 0;
	margin: 0;
}
.menu-link,
.menu-heading {
	text-decoration: none;
	white-space: nowrap;
}
.menu-link { display: block; }
.menu-horizontal { white-space: nowrap; }
.menu-horizontal .menu-list { display: inline-block; }
.menu-horizontal .menu-item,
.menu-horizontal .menu-heading,
.menu-horizontal .menu-separator {
	display: inline-block;
	*display: inline;
	zoom: 1;
	vertical-align: middle;
}

/* Menu skin: */
.menu-separator {
	background-color: #ccc;
	height: 1px;
	margin: .3em 0;
}
.menu-horizontal .menu-separator {
	width: 1px;
	height: 1.3em;
	margin: 0 .3em ;
}
.menu-heading {
	text-transform: uppercase;
	color: #565d64;
}
.menu-link { color: #777; }
.menu-children { background-color: #fff; }
.menu-link,
.menu-disabled,
.menu-heading {
	font-size: 1em;
	line-height: 4.1em;
	height: 4.1em;
}
.menu-disabled { opacity: .5; }
.menu-disabled .menu-link:hover { background-color: transparent; }
.menu-active > .menu-link,
.menu-link:hover,
.menu-link:focus { background-color: #eee; }
.menu-selected .menu-link,
.menu-selected .menu-link:visited { color: #000; }

/* http://purecss.io/layouts/tucked-menu-vertical/ */
#nav {
	border: 1px solid red;
	height: 4.1em;
	overflow: hidden;
	-webkit-transition: height .5s;
	 -khtml-transition: height .5s;
	   -moz-transition: height .5s;
		-ms-transition: height .5s;
		 -o-transition: height .5s;
			transition: height .5s;
}
#nav.open { height: 20.5em; } /* 4.1em * # of items */
#nav .toggle {
	width: 40px;
	height: 40px;
	display: block;
	position: absolute;
	right: 0;
	top: 50%;
	-webkit-transform: translateY(-50%);
	   -moz-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		 -o-transform: translateY(-50%);
			transform: translateY(-50%);
}
@media screen and (min-width: 48em) {
	#nav .toggle { display: none; }
}
#nav .toggle .bar {
	background-color: #777;
	display: block;
	width: 20px;
	height: 2px;
	border-radius: 100px;
	position: absolute;
	top: 18px;
	right: 10px;
	-webkit-transition: all .5s;
	 -khtml-transition: all .5s;
	   -moz-transition: all .5s;
		-ms-transition: all .5s;
		 -o-transition: all .5s;
			transition: all .5s;
}
#nav .toggle .bar:first-child {
	-webkit-transform: translateY(-6px);
	 -khtml-transform: translateY(-6px);
	   -moz-transform: translateY(-6px);
		-ms-transform: translateY(-6px);
		 -o-transform: translateY(-6px);
			transform: translateY(-6px);
}
#nav .toggle.x .bar {
	-webkit-transform: rotate(45deg);
	 -khtml-transform: rotate(45deg);
	   -moz-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		 -o-transform: rotate(45deg);
			transform: rotate(45deg);
}
#nav .toggle.x .bar:first-child {
	-webkit-transform: rotate(-45deg);
	 -khtml-transform: rotate(-45deg);
	   -moz-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		 -o-transform: rotate(-45deg);
			transform: rotate(-45deg);
}

@media screen and (min-width: 48em) {
	.menu-3 { text-align: right; }
}

@media screen and (min-width: 48em) {

	#nav > div:nth-child(2) { text-align: center; }
	#nav > div:nth-child(3) { text-align: right; }

}

## nav.html
<!doctype html>
<html lang="en" dir="ltr">
<head>

	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">

	<title></title>
	<meta name="description" content="">
	<meta name="keywords" content="">

	<link rel="stylesheet" href="styles/nav.css">

</head>
<body>

	<nav id="nav" class="block-group">

		<div class="block">

			<div class="masthead">
				<!-- <a href="#" class="menu-heading brand">Brand</a> -->
				<a href="#" id="toggle" class="toggle"><s class="bar"></s><s class="bar"></s></a>
			</div>

		</div> <!-- /.block -->

		<div class="block">

			<div class="menu menu-horizontal nav-can-transform">
				<ul class="menu-list">
					<li class="menu-item"><a href="#" class="menu-link">Home</a></li>
					<li class="menu-item"><a href="#" class="menu-link">About</a></li>
					<li class="menu-item"><a href="#" class="menu-link">Contact</a></li>
				</ul>
			</div>

		</div> <!-- /.block -->

		<div class="block">

			<div class="menu menu-horizontal nav-can-transform">
				<ul class="menu-list">
					<li class="menu-item"><a href="#" class="menu-link">Yahoo</a></li>
					<li class="menu-item"><a href="#" class="menu-link">W3C</a></li>
				</ul>
			</div>

		</div> <!-- /.block -->

	</div> <!-- /#nav -->

	<script src="scripts/nav.js"></script>

</body>
</html>

## nav.js
window.addEventListener('DOMContentLoaded', function() {

	(function (window, document) {

		var menu = document.getElementById('nav'),

		WINDOW_CHANGE_EVENT = ('onorientationchange' in window) ? 'orientationchange' : 'resize';

		function toggleHorizontal() {

			[].forEach.call(
				document.getElementById('nav').querySelectorAll('.nav-can-transform'),
				function(el) {

					el.classList.toggle('menu-horizontal');

				}
			);

		}

		function toggleMenu() {

			if (menu.classList.contains('open')) {

				setTimeout(toggleHorizontal, 500);

			} else {

				toggleHorizontal();

			}

			menu.classList.toggle('open');

			document.getElementById('toggle').classList.toggle('x');

		}

		function closeMenu() {

			if (menu.classList.contains('open')) {

				toggleMenu();

			}

		}

		document.getElementById('toggle').addEventListener('click', function (e) {

			toggleMenu();

		});

		window.addEventListener(WINDOW_CHANGE_EVENT, closeMenu);

	})(this, this.document);

});