ECkurt/Sticky Menu CSS

## Sticky Menu CSS
body {
	font-size: 16px;
	line-height: 1.4;
	margin: 0;
	font-family: Georgia, Times, "Times New Roman", serif;
	background-color: #EEE;
}

.clearfix:before,.clearfix:after {content: " "; display: table;}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;}

#container {
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	width: 70%;
	margin: auto;
	background-color: #fefefe;
	color: #242B30;
	padding: 55px 1%;
}

#container h1 {font-size: 1.8em;}
#container h2 {font-size: 1.35em;}

#navbar {
	width: 70%; /* Should be same width as content container */
	position: fixed;
	top: 0;	left: 15%; /* Left is 100-[content width]/2). */
	opacity: 1;
	z-index: 100;
	-webkit-transition: all 1s ease;
	transition: all 1s ease;
}

nav ul {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	list-style-type: none;
	background-color: #9C413F;
	background-image: linear-gradient(to bottom, #9C413F 0%, #c4524f 100%);
	width: 50%;
	margin: 0;
	padding: 10px 0;
	color: #F1F1F1;
}

nav ul:nth-of-type(1) {float: left;}
nav ul:nth-of-type(2) {float: right;}

nav ul li {
	float: left;
	margin: 0;
	padding: 8px;
}
nav ul:nth-of-type(2) li {float: right;}

nav ul li a {
	text-decoration: none;
	color: #ffffff;
}

nav ul li a:hover {text-decoration: underline;}

.fixednav {
	left: 0 !important;
	width: 100% !important;
	opacity: .9 !important;
}

.filler {font-size: .8em;}

.fixednav ul {
	-webkit-transition: all 1s ease;
	transition: all 1s ease;
	width: 15% !important;
	text-align: center;
}
.fixednav ul li {display: block; float: none;}
.fixednav ul:nth-of-type(2) li {float: none;}


@media only screen and (max-width: 800px) {
	body {font-size: 15px;}

	#container {
		width: 80%;
		position: absolute;
		left: 20%;
		padding: 1%;
	}

	#navbar {
		width: 20%;
		position: fixed;
		top: 0; left: 0;
		opacity: 1;
		-webkit-transition: none;
		transition: none;
	}

	nav ul {width: 100%; padding: 0; background-image: none;}
	nav ul:nth-of-type(2) {float: left;}
	nav ul li, nav ul:nth-of-type(2) li {float: none;}

	nav#navbar ul a {display: block;}

	.fixednav {
		left: 0 !important;
		width: 20% !important;
		opacity: 1 !important;
	}

	.fixednav ul {
		-webkit-transition: none;
		transition: none;
		width: 100% !important;
		text-align: left;
	}
}

@media only screen and (max-width: 600px) {
	body {font-size: 14px;}

	nav#navbar {
		top: 55px;
		left: -150px;
		width: 150px;
		-webkit-transition: all 300ms;
		transition: all 300ms;
		opacity: 0.92;
	}

	nav#navbar ul {
		-webkit-transition: all 300ms;
		transition: all 300ms;
	}

	body.menu-active nav#navbar {left: 0px;}
	body.menu-active nav#navbar ul {left: 0px;}

	#container {
		position: fixed;
		top: 0; left: 0;
		width: 100%;
		height: 100%;
		padding: 0 1% 1% 43px;
		overflow: scroll;
	}

	div.menu-trigger {
		position: fixed;
		top: 7px; left: 7px;
		width: 32px; height: 32px;
		background: #9C413F;
		cursor: pointer;
		border-radius: 5px;
		-webkit-transition: all 300ms;
		transition: all 300ms;
		z-index: 999;
		opacity: 0.8;
	}

	div.menu-trigger:before {
		content: 'N';
		display: inline-block;
		width: 32px;
		height: 32px;
		font-size: 1.2em;
		text-align: center;
		text-transform: none;
		line-height: 32px;
		color: #fff;
	}
}

## Sticky Menu HTML

<!DOCTYPE html>
<html class="no-js">
<head>
	<meta charset="utf-8">
	<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
	<title>Crazy Responsive Sticky Menu</title>
	<meta content="The fixed navigation UI pattern that puts content first, works (mostly) everywhere, and needs no jQuery!" name="description">
	<meta content="width=device-width" name="viewport">
	<link rel="stylesheet" href="style.css">
</head>

<body>

	<div class="menu-trigger"></div>

	<nav id="navbar">
		<ul>
			<li><a href="http://ethercycle.com">Ethercycle</a></li>
			<li><a href="http://ethercycle.com/stickymenu">Stickymenu</a></li>
			<li><a href="http://rainycafe.com">Rainy Cafe</a></li>
		</ul>

		<ul>
			<li><a href="https://www.facebook.com/ethercycle">Facebook</a></li>
			<li><a href="https://twitter.com/ethercycle">Twitter</a></li>
			<li><a href="http://www.linkedin.com/company/ethercycle">LinkedIn</a></li>
		</ul>
	</nav>

	<div id="container">
		<h1>Crazy Responsive Sticky Menu</h1>

		<h2>The fixed navigation UI pattern that puts content first, works (mostly) everywhere, and needs no jQuery!</h2>

		<p>Sticky menus are a design pattern that fix the navigation to the top of the page. While I won't go so far as saying scrolling back to top is a problem, <strong>sticky menus certainly make navigation faster</strong>. This makes them especially good for long-form pages especially those trendy single-page websites (like the one for your artisanal mustache wax startup.)</p>

		<p>While sticky menus make navigation quicker, they also present a new problem: They take up screen real estate. That might not be a problem for the six percent of you with 30 inch monster displays, but for the rest of us with 13" notebooks, it's annoying. We solve the problem by <strong>moving the navigation out of the way out of the content.</strong> Go ahead, scroll down this page and you'll see what I mean.</p>

		<p>On most displays, the menu is in the gutter or sidebar. I say most because this thing is <strong>crazy responsive.</strong> It works on all display widths, down to 320px. Yes, in all widths, the menu remains fixed to the top and readily accessible. On phones we cheat a little by using the popular iOS sliding menu style, but it's cool because we keep a navigation icon pinned to the top.</p>

		<p>There are no dependencies. Aside from a little bit of JavaScript to append a class name on scroll, all the magic happens in CSS. This keeps your page load time low, and let's us sleep better knowing <strong>we're not using abusing jQuery.</strong></p>

		<p><b>Cross Browser Compatibility</b><br>
		This is tested and working in:</p>

		<ol>
			<li>Chrome 33</li>
			<li>FireFox 27</li>
			<li>iOS7</li>
			<li>Safari 7</li>
			<li>IE 9 (IE 10 for snazzy animations)</li>
		</ol>

		<p>Not saying it won't work in other browsers, we're only listing what we tested.</p>

		<p>You dig it? <a href="http://ethercycle.com/stickymenu/stickymenu.zip">It's yours</a>.</p>

		<p>Crazy Responsive Sticky Menu is distributed under a <em>Do What the Fuck You Want to Public License</em>. Everyone is permitted to copy and distribute verbatim or modified copies of this document, and changing it is allowed as long as the name is changed. You just do what the fuck you want to.</p>

		<p style="font-style: italic; font-weight: bold">And now we bring you some extra content we had to add in order show off the hot scrolling action</p>

		<div class="filler">
			<p>Along the shore the cloud waves break,<br>
			The twin suns sink beneath the lake,<br>
			The shadows lengthen<br>
			In Carcosa.</p>

			<p>Strange is the night where black stars rise,<br>
			And strange moons circle through the skies<br>
			But stranger still is<br>
			Lost Carcosa.</p>

			<p>Songs that the Hyades shall sing,<br>
			Where flap the tatters of the King,<br>
			Must die unheard in<br>
			Dim Carcosa.</p>

			<p>Song of my soul, my voice is dead;<br>
			Die thou, unsung, as tears unshed<br>
			Shall dry and die in<br>
			Lost Carcosa.</p>
		</div>

		<p>&copy; 2014 <a href="http://ethercycle.com/" title="Responsive Web Design &amp; Development Company - Ethercycle&#8480; — Chicago, IL">Ethercycle LLC</a>. All up in the <a href="https://twitter.com/ethercycle">Twitter</a>.</p>

	</div>

	<script>
		window.onscroll=function(){document.getElementById('navbar').setAttribute('class', (window.pageYOffset>5?'fixednav clearfix':'clearfix'));}
	</script>

	<script>
	(function() {
		var $body = document.body
		, $menu_trigger = $body.getElementsByClassName('menu-trigger')[0];

		if ( typeof $menu_trigger !== 'undefined' ) {
			$menu_trigger.addEventListener('click', function() {
				$body.className = ( $body.className == 'menu-active' )? '' : 'menu-active';
			});
		}

	}).call(this);
	</script>
</body>
</html>