JSFiddle - React, Tailwind, and code Playground

by satantx

HTML

<body>
		<div class="wrapper">
			<ul class="nav">
				<li>
					<a href="">menu</a>
				</li>
				<li>
					<a href="">menu</a>
				</li>
                <li>
					<a href="">menu</a>
				</li>
                <li>
					<a href="">menu</a>
				</li>
                <li>
					<a href="">menu</a>
				</li>		
			</ul>
			<div class="header">
				<h2>header</h2>
			</div>
			<div class="main clearfix">
				main main main main main main main main main main main main main main main main main
			</div>
		</div>
		<div class="footer">
			footer
		</div>
	</body>

CSS

/* CSS reset and initialization*/

*{
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

@font-face {
    font-family: Open_Sans_Light;
    src: url(../fonts/opensans-light.eot);
    src: local(Open_Sans_Light), url(../fonts/opensans-light.ttf);
}

/* Base elements */

a{
	text-decoration: none;
}

html, body{
	height: 100%;
	min-width: 760px;					/* Site width */
	width: auto !important; 
	width: 760px;						
}

body {
	color: #000;
	font-family: Open_Sans_Light, Tahoma, Sans Serif;
	height: 100%;
	line-height: 1;
	background-color: #313b62;
}

ul {
	list-style: none;
}

/* Wrapper */

.wrapper {
	background-color: #ccc;
	height: 100%;
	height: auto;
	min-height: 100%;
}

/* Nav */

.nav{
	height: 60px;						/* Nav height */
	left: 0;
	line-height: 60px;					/* Nav height */
	position: fixed;
	min-width: 760px;
    width: 100%;
}

.nav a{
	color: #e6e9f3;
	display: block;
	left: 0;
	right: 0;
	position: relative;
}

.nav  li {
	background-color: rgba(34,44,80,.95);
	color: #e6e9f3;
	cursor: pointer;
	display: block;
	float: left;
	position: relative;
	text-align: center;
	width: 20%;
	white-space: nowrap;
}

.nav li.active,
.nav ul.focus li,
.nav li:hover {
	color: #fff;
	background-color: rgba(25,35,68,.95);
}

.nav li a:hover,
.nav li.active > a{
	color: #fff;
}

.nav ul {
	display: none;
	left: 0;
	position: absolute;
	right: -50%;
	top: 60px;
}

.nav ul li {
	float: none;
	text-align: left;
	width: auto;
}

.nav ul a{
	padding: 0 20px;
}

.nav ul li.active,
.nav ul li:hover { 
	background-color: #368cda; 
}

.nav ul.focus {
	display: block;
}
.nav span{
	color: #9cf;
}

/* Header */

.header{
	height: 100px;
	background-color: #313b62;
	padding-top: 60px;					/* Nav height */
}

/* Main */

.main {
	padding-bottom: 100px;				/* Footer height */
}

/* Footer */

.footer {
	background-color: #313b62;
	position: relative;
	margin-top: -100px;					/* Footer height */
	height: 100px;						/* Footer height...

JavaScript

$(document).scroll(function(){
		var scr = 0 - $(this).scrollLeft();
		$('.nav').css("left", scr);
	});