JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<!DOCTYPE html>
<!--[if lt IE 7]>
<html class="no-js lt-ie9 lt-ie8 lt-ie7">
<![endif]-->
<!--[if IE 7]>
<html class="no-js lt-ie9 lt-ie8">
<![endif]-->
<!--[if IE 8]>
<html class="no-js lt-ie9">
<![endif]-->
<!--[if gt IE 8]>
<!-->
<html class="no-js">
<!--<![endif]-->
<body>
<div id="wrapper">
<!-- Header -->
<div class="container-fluid no-padding header">
<div class="row-fluid fill-height">
<!-- Header Left -->
<div class="span2">
<p class="center-text">Left</p>
</div>
<!-- Header Middle -->
<div class="span8">
<p class="center-text">Middle</p>
</div>
<!-- Header Right -->
<div class="span2">
<p class="center-text">Right</p>
</div>
</div>
</div>
<!-- Content Wrapper -->
<div class="container-fluid no-padding fill">
<div class="row-fluid">
<div class="span2">
<div class="well sidebar-nav-fixed no-padding">
<ul id="nav">
<li><a href="#">Item 1</a>
<ul>
<li><a href="#">Sub-Item 1...
CSS
/* ==========================================================================
HTML5 Boilerplate styles - h5bp.com (generated via initializr.com)
========================================================================== */
html, button, input, select, textarea {
color: #222;
height: 100%;
}
body {
font-size: 1em;
line-height: 1.4;
height: 100%;
width:100%;
position: absolute;
}
::-moz-selection {
background: #b3d4fc;
text-shadow: none;
}
::selection {
background: #b3d4fc;
text-shadow: none;
}
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
img {
vertical-align: middle;
}
fieldset {
border: 0;
margin: 0;
padding: 0;
}
textarea {
resize: vertical;
}
.chromeframe {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}
/* ==========================================================================
Author's custom styles
========================================================================== */
/* =======
Helpers
======= */
.no-padding {
padding: 0;
}
.fill-height {
min-height: 100%;
height: 100%;
}
.center-text {
text-align: center;
vertical-align: middle;
}
/* =======
Wrapper
======= */
#wrapper {
min-height: 100%;
height: auto !important;
margin: 0 auto -33px;
}
#footer {
border-top: 1px solid #333;
height: 30px;
}
.contain {
padding-bottom: 30px;
}
/* =======
Header
======= */
.header {
height: 90px;
}
.header_logo {
padding-top: 10px;
}
/* ==========
Navigation
========== */
.sidebar {
position: fixed;
width: 200px;
top: 90px;
}
#navbar {
float: left;
width: 15%;
height: 85%;
background-color: #ccc;
}
#nav {
float: left;
width: 100%;
border-top: 1px solid #999;
border-right: 1px solid #999;
border-left: 1px solid #999;
list-style-type:...
JavaScript
$(document).ready(function () {
$('#nav > li > a').click(function () {
if ($(this).attr('class') != 'active') {
$('#nav li ul').slideUp();
$(this).next().slideToggle();
$('#nav li a').removeClass('active');
$(this).addClass('active');
}
});
});