<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<nav class="navbar navbar-inverse sidebar" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-sidebar-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-sidebar-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home<span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-home"></span></a></li>
<li ><a href="#">Profile<span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-user"></span></a></li>
<li ><a href="#">Messages<span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-envelope"></span></a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Settings <span class="caret"></span><span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-cog"></span></a>
<ul class="dropdown-menu forAnimate" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
<li><a href="#">Home<span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-home"></span></a></li>
<li ><a href="#">Profile<span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-user"></span></a></li>
<li ><a href="#">Messages<span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-envelope"></span></a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Settings <span class="caret"></span><span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-cog"></span></a>
<ul class="dropdown-menu forAnimate" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div class="main">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi elementum, quam ut luctus convallis, leo magna ornare nisi, at imperdiet sem purus sed lorem. Mauris faucibus ipsum ac diam viverra egestas. Etiam eu ex varius nulla rutrum semper. Aliquam at sapien fermentum, blandit elit id, auctor magna. Aenean ac dolor eget ante cursus cursus ut eget metus. Duis vel mattis erat. Nam mollis libero quis justo facilisis, at volutpat augue auctor. Quisque eu facilisis quam, et semper nulla. In sit amet luctus turpis. Curabitur ultrices arcu vestibulum ante egestas, quis dapibus orci auctor.
</p>
<p>
Sed mattis, ex ac mattis ornare, magna est auctor elit, eget facilisis neque augue eu velit. Duis quam metus, posuere vel bibendum vel, rhoncus id diam. Curabitur vitae augue hendrerit, varius lectus ac, sodales metus. Quisque sollicitudin neque vitae mauris cursus, quis laoreet neque mollis. Duis nec tempus turpis. Vivamus nunc diam, auctor a tristique ac, tincidunt sit amet nunc. Morbi suscipit semper lectus id bibendum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque luctus elit in ligula aliquet, eget blandit eros volutpat. Proin efficitur nunc a magna eleifend convallis. Pellentesque interdum odio vel ipsum suscipit, et ultrices ex venenatis.
</p>
<p>
Nunc id sodales massa. Sed volutpat turpis laoreet aliquam imperdiet. In ut interdum nibh. Praesent commodo ex ante, eget rhoncus ante dapibus in. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce dignissim eget nunc nec porta. Integer sed vestibulum enim, commodo viverra mi.
</p>
<p>
Cras at ante varius, scelerisque dolor eu, viverra erat. Maecenas enim mi, molestie et purus eget, malesuada efficitur ex. Praesent imperdiet posuere leo quis vulputate. Curabitur dignissim arcu nisi, non lobortis orci pretium eget. Pellentesque in metus laoreet, bibendum ex pulvinar, volutpat magna. Ut accumsan, urna nec volutpat tincidunt, ante tortor tincidunt enim, nec feugiat enim ligula eget orci. Proin vitae luctus purus, eget bibendum justo. Praesent convallis mauris ligula, non suscipit orci aliquam quis. Nam auctor ultricies turpis sit amet ornare. Aliquam feugiat, leo nec sollicitudin ullamcorper, est leo rutrum sapien, sit amet accumsan felis augue sit amet nisl.
</p>
<p>
Etiam porttitor erat quis dictum posuere. Nullam pulvinar arcu a massa ultrices iaculis at id tortor. Nunc leo lacus, tincidunt non egestas at, maximus at eros. Ut vel accumsan nisi, quis vestibulum magna. Phasellus tempus ornare felis interdum molestie. Sed non tincidunt tellus. Ut vestibulum leo mi, at lobortis ex feugiat vel. Aenean efficitur porttitor urna.
</p>
</div>
body,html{
height: 100%;
}
/* remove outer padding */
.main .row{
padding: 0px;
margin: 0px;
}
/*Remove rounded coners*/
nav.sidebar.navbar {
border-radius: 0px;
}
nav.sidebar, .main{
-webkit-transition: margin 200ms ease-out;
-moz-transition: margin 200ms ease-out;
-o-transition: margin 200ms ease-out;
transition: margin 200ms ease-out;
}
/* Add gap to nav and right windows.*/
.main{
padding: 10px 10px 0 10px;
}
/* .....NavBar: Icon only with coloring/layout.....*/
/*small/medium side display*/
@media (min-width: 768px) {
/*Allow main to be next to Nav*/
.main{
position: absolute;
width: calc(100% - 40px); /*keeps 100% minus nav size*/
margin-left: 40px;
float: right;
}
/*lets nav bar to be showed on mouseover*/
nav.sidebar:hover + .main{
margin-left: 200px;
}
/*Center Brand*/
nav.sidebar.navbar.sidebar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand {
margin-left: 0px;
}
/*Center Brand*/
nav.sidebar .navbar-brand, nav.sidebar .navbar-header{
text-align: center;
width: 100%;
margin-left: 0px;
}
/*Center Icons*/
nav.sidebar a{
padding-right: 13px;
}
/*adds border top to first nav box */
nav.sidebar .navbar-nav > li:first-child{
border-top: 1px #e5e5e5 solid;
}
/*adds border to bottom nav boxes*/
nav.sidebar .navbar-nav > li{
border-bottom: 1px #e5e5e5 solid;
}
/* Colors/style dropdown box*/
nav.sidebar .navbar-nav .open .dropdown-menu {
position: static;
float: none;
width: auto;
margin-top: 0;
background-color: transparent;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
/*allows nav box to use 100% width*/
nav.sidebar .navbar-collapse, nav.sidebar .container-fluid{
padding: 0 0px 0 0px;
}
/*colors dropdown box text */
.navbar-inverse .navbar-nav .open .dropdown-menu>li>a {
color: #777;
}
/*gives sidebar width/height*/
nav.sidebar{
width: 200px;
height: 100%;
margin-left: -160px;
float: left;
z-index: 8000;
margin-bottom: 0px;
}
/*give sidebar 100% width;*/
nav.sidebar li {
width: 100%;
}
/* Move nav to full on mouse over*/
nav.sidebar:hover{
margin-left: 0px;
}
/*for hiden things when navbar hidden*/
.forAnimate{
opacity: 0;
}
}
/* .....NavBar: Fully showing nav bar..... */
@media (min-width: 1330px) {
/*Allow main to be next to Nav*/
.main{
width: calc(100% - 200px); /*keeps 100% minus nav size*/
margin-left: 200px;
}
/*Show all nav*/
nav.sidebar{
margin-left: 0px;
float: left;
}
/*Show hidden items on nav*/
nav.sidebar .forAnimate{
opacity: 1;
}
}
nav.sidebar .navbar-nav .open .dropdown-menu>li>a:hover, nav.sidebar .navbar-nav .open .dropdown-menu>li>a:focus {
color: #CCC;
background-color: transparent;
}
nav:hover .forAnimate{
opacity: 1;
}
section{
padding-left: 15px;
}
function htmlbodyHeightUpdate(){
var height3 = $( window ).height()
var height1 = $('.nav').height()+50
height2 = $('.main').height()
if(height2 > height3){
$('html').height(Math.max(height1,height3,height2)+10);
$('body').height(Math.max(height1,height3,height2)+10);
}
else
{
$('html').height(Math.max(height1,height3,height2));
$('body').height(Math.max(height1,height3,height2));
}
}
$(document).ready(function () {
htmlbodyHeightUpdate()
$( window ).resize(function() {
htmlbodyHeightUpdate()
});
$( window ).scroll(function() {
height2 = $('.main').height()
htmlbodyHeightUpdate()
});
});
