<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 ---------->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" />
<div class="row affix-row">
<div class="col-sm-3 col-md-2 affix-sidebar">
<div class="sidebar-nav">
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="visible-xs navbar-brand">Sidebar menu</span>
</div>
<div class="navbar-collapse collapse sidebar-navbar-collapse">
<ul class="nav navbar-nav" id="sidenav01">
<li class="active">
<a href="#" data-toggle="collapse" data-target="#toggleDemo0" data-parent="#sidenav01" class="collapsed">
<h4>
Control Panel
<br>
<small>Drop Down <span class="caret"></span></small>
</h4>
</a>
<div class="collapse" id="toggleDemo0" style="height: 0px;">
<ul class="nav nav-list">
<li><a href="#">Profile SubMenu1</a></li>
<li><a href="#">Profile SubMenu2</a></li>
<li><a href="#">Profile SubMenu3</a></li>
</ul>
</div>
</li>
<li>
<a href="#" data-toggle="collapse" data-target="#toggleDemo" data-parent="#sidenav01" class="collapsed">
<span class="glyphicon glyphicon-cloud"></span> Submenu 1 <span class="caret pull-right"></span>
</a>
<div class="collapse" id="toggleDemo" style="height: 0px;">
<ul class="nav nav-list">
<li><a href="#">Submenu1.1</a></li>
<li><a href="#">Submenu1.2</a></li>
<li><a href="#">Submenu1.3</a></li>
</ul>
</div>
</li>
<li class="active">
<a href="#" data-toggle="collapse" data-target="#toggleDemo2" data-parent="#sidenav01" class="collapsed">
<span class="glyphicon glyphicon-inbox"></span> Submenu 2 <span class="caret pull-right"></span>
</a>
<div class="collapse" id="toggleDemo2" style="height: 0px;">
<ul class="nav nav-list">
<li><a href="#">Submenu2.1</a></li>
<li><a href="#">Submenu2.2</a></li>
<li><a href="#">Submenu2.3</a></li>
</ul>
</div>
</li>
<li><a href="#"><span class="glyphicon glyphicon-lock"></span> Normalmenu</a></li>
<li><a href="#"><span class="glyphicon glyphicon-calendar"></span> WithBadges <span class="badge pull-right">42</span></a></li>
<li><a href=""><span class="glyphicon glyphicon-cog"></span> PreferencesMenu</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="col-sm-9 col-md-10 affix-content">
<div class="container">
<div class="page-header">
<h3><i class="fa fa-tachometer" aria-hidden="true"></i> Navigation</h3>
</div>
<PRE> this is a way to display code <DIV> </PRE>
<p>Praesent aliquet, sapien id pulvinar auctor, elit nisl imperdiet elit, id mattis felis lacus a neque. Fusce ullamcorper, urna vitae mollis tempus, sapien urna aliquam neque, sed dignissim nunc mauris sed nisi. Mauris malesuada congue mauris. Aenean vel justo tincidunt, euismod dolor ut, mattis purus. Vivamus eget adipiscing augue. Curabitur et neque faucibus nunc porta ultrices eu ut justo. Nam eu quam et urna consectetur convallis. Integer at fringilla erat, ut molestie nulla. Maecenas rutrum justo ut lectus gravida, vitae eleifend nulla ullamcorper. Sed consequat sit amet purus id congue. Integer condimentum, odio non pellentesque posuere, eros nisi porttitor nunc, ac laoreet nibh quam eu eros. Sed quis massa posuere, gravida erat non, varius turpis. Morbi venenatis vestibulum vulputate. Vestibulum arcu mauris, commodo commodo ligula nec, molestie blandit neque. Nulla imperdiet, massa nec placerat iaculis, odio lacus aliquam dui, eu vehicula velit dolor et augue.</p>
</div>
</div>
</div>
/* make sidebar nav vertical */
@media (min-width: 768px){
.affix-content .container {
width: 700px;
}
html,body{
background-color: #f8f8f8;
height: 100%;
overflow: hidden;
}
.affix-content .container .page-header{
margin-top: 0;
}
.sidebar-nav{
position:fixed;
width:100%;
}
.affix-sidebar{
padding-right:0;
font-size:small;
padding-left: 0;
}
.affix-row, .affix-container, .affix-content{
height: 100%;
margin-left: 0;
margin-right: 0;
}
.affix-content{
background-color:white;
}
.sidebar-nav .navbar .navbar-collapse {
padding: 0;
max-height: none;
}
.sidebar-nav .navbar{
border-radius:0;
margin-bottom:0;
border:0;
}
.sidebar-nav .navbar ul {
float: none;
display: block;
}
.sidebar-nav .navbar li {
float: none;
display: block;
}
.sidebar-nav .navbar li a {
padding-top: 12px;
padding-bottom: 12px;
}
}
@media (min-width: 769px){
.affix-content .container {
width: 600px;
}
.affix-content .container .page-header{
margin-top: 0;
}
}
@media (min-width: 992px){
.affix-content .container {
width: 900px;
}
.affix-content .container .page-header{
margin-top: 0;
}
}
@media (min-width: 1220px){
.affix-row{
overflow: hidden;
}
.affix-content{
overflow: auto;
}
.affix-content .container {
width: 1000px;
}
.affix-content .container .page-header{
margin-top: 0;
}
.affix-content{
padding-right: 30px;
padding-left: 30px;
}
.affix-title{
border-bottom: 1px solid #ecf0f1;
padding-bottom:10px;
}
.navbar-nav {
margin: 0;
}
.navbar-collapse{
padding: 0;
}
.sidebar-nav .navbar li a:hover {
background-color: #428bca;
color: white;
}
.sidebar-nav .navbar li a > .caret {
margin-top: 8px;
}
}
