"Navigation Sidebar with Toggle"
Bootstrap 3.0.3 Snippet by bartuspan

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div id="wrapper" class="active"> <!-- Sidebar --> <!-- Sidebar --> <div id="sidebar-wrapper"> <ul id="sidebar_menu" class="sidebar-nav"> <li class="sidebar-brand"><a id="menu-toggle" href="#">Menu<span id="main_icon" class="glyphicon glyphicon-align-justify"></span></a></li> </ul> <ul class="sidebar-nav" id="sidebar"> <li><a>Link1<span class="sub_icon glyphicon glyphicon-link"></span></a></li> <li><a>link2<span class="sub_icon glyphicon glyphicon-link"></span></a></li> </ul> </div> <div class="navbar navbar-inverse nav"> <div class="navbar-inner"> <div class="container"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <a class="brand" href="/">CMS</a> <div class="nav-collapse collapse"> <ul class="nav"> <li class="divider-vertical"></li> <li><a href="#"><i class="icon-home icon-white"></i> Home</a></li> </ul> <div class="pull-right"> <ul class="nav pull-right"> <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Welcome, User <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="/user/preferences"><i class="icon-cog"></i> Preferences</a></li> <li><a href="/help/support"><i class="icon-envelope"></i> Contact Support</a></li> <li class="divider"></li> <li><a href="/auth/logout"><i class="icon-off"></i> Logout</a></li> </ul> </li> </ul> </div> </div> </div> </div> </div> <!-- Page content --> <div id="page-content-wrapper"> <!-- Keep all page content within the page-content inset div! --> <div class="page-content inset"> <div class="row"> <div class="col-md-12"> <p class="well lead">An Experiment using the sidebar template from startbootstrap.com which I integrated in my website (<a href="http://animeshmanglik.name">animeshmanglik.name</a>)</p> <p class="well lead">Click on the Menu to Toggle Sidebar . Hope you enjoy it!</p> </div> </div> </div> </div> <div class="row"> <button class="btn btn-sm btn-default">Default</button> <button class="btn btn-sm btn-primary">Primary</button> <button class="btn btn-sm btn-info">Info</button> <button class="btn btn-sm btn-success">Success</button> <button class="btn btn-sm btn-danger">Danger</button> <button class="btn btn-sm btn-warning">Warning</button> <br> <br> <button class="btn btn-default">Default</button> <button class="btn btn-primary">Primary</button> <button class="btn btn-info">Info</button> <button class="btn btn-success">Success</button> <button class="btn btn-danger">Danger</button> <button class="btn btn-warning">Warning</button> <br> <br> <button class="btn btn-lg btn-default">Default</button> <button class="btn btn-lg btn-primary">Primary</button> <button class="btn btn-lg btn-info">Info</button> <button class="btn btn-lg btn-success">Success</button> <button class="btn btn-lg btn-danger">Danger</button> <button class="btn btn-lg btn-warning">Warning</button> <button type="button" class="btn btn-default btn-circle"><i class="glyphicon glyphicon-ok"></i></button> <button type="button" class="btn btn-primary btn-circle"><i class="glyphicon glyphicon-list"></i></button> <button type="button" class="btn btn-success btn-circle"><i class="glyphicon glyphicon-link"></i></button> <button type="button" class="btn btn-info btn-circle"><i class="glyphicon glyphicon-ok"></i></button> <button type="button" class="btn btn-warning btn-circle"><i class="glyphicon glyphicon-remove"></i></button> <button type="button" class="btn btn-danger btn-circle"><i class="glyphicon glyphicon-heart"></i></button> <h2>lg</h2> <button type="button" class="btn btn-default btn-circle btn-lg"><i class="glyphicon glyphicon-ok"></i></button> <button type="button" class="btn btn-primary btn-circle btn-lg"><i class="glyphicon glyphicon-list"></i></button> <button type="button" class="btn btn-success btn-circle btn-lg"><i class="glyphicon glyphicon-link"></i></button> <button type="button" class="btn btn-info btn-circle btn-lg"><i class="glyphicon glyphicon-ok"></i></button> <button type="button" class="btn btn-warning btn-circle btn-lg"><i class="glyphicon glyphicon-remove"></i></button> <button type="button" class="btn btn-danger btn-circle btn-lg"><i class="glyphicon glyphicon-heart"></i></button> <h2>xl</h2> <button type="button" class="btn btn-default btn-circle btn-xl"><i class="glyphicon glyphicon-ok"></i></button> <button type="button" class="btn btn-primary btn-circle btn-xl"><i class="glyphicon glyphicon-list"></i></button> <button type="button" class="btn btn-success btn-circle btn-xl"><i class="glyphicon glyphicon-link"></i></button> <button type="button" class="btn btn-info btn-circle btn-xl"><i class="glyphicon glyphicon-ok"></i></button> <button type="button" class="btn btn-warning btn-circle btn-xl"><i class="glyphicon glyphicon-remove"></i></button> <button type="button" class="btn btn-danger btn-circle btn-xl"><i class="glyphicon glyphicon-heart"></i></button> </div>
.container {margin-top:40px;} body {text-rendering:optimizespeed;} .btn:not(a) {border:0;border-bottom:0;border-left:0;font-weight:'900';font-family:'Ubuntu', sans-serif;box-shadow: inset 0 -3.2px rgba(0, 0, 0, 0.12),inset 2px 0 rgba(0, 0, 0, 0.1);outline:none;-webkit-outline:none;-o-outline:none;-moz-outline:none;} .btn:active:not(a), .btn.active {outline:none;-moz-outline:none;background-image: none;-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125) !important;position: relative;box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125) !important;top: 1px;left:-1px;} .btn:focus:not(a) {outline:none;-webkit-outline:none;-moz-outline:none;} .btn-sm {padding-top:1.5px;} .row{ margin-left:0px; margin-right:0px; } #wrapper { padding-left: 70px; transition: all .4s ease 0s; height: 100% } #sidebar-wrapper { margin-left: -150px; left: 70px; width: 150px; background: #222; position: fixed; height: 100%; z-index: 10000; transition: all .4s ease 0s; } .sidebar-nav { display: block; float: left; width: 150px; list-style: none; margin: 0; padding: 0; } #page-content-wrapper { padding-left: 0; margin-left: 0; width: 100%; height: auto; } #wrapper.active { padding-left: 150px; } #wrapper.active #sidebar-wrapper { left: 150px; } #page-content-wrapper { width: 100%; } #sidebar_menu li a, .sidebar-nav li a { color: #999; display: block; float: left; text-decoration: none; width: 150px; background: #252525; border-top: 1px solid #373737; border-bottom: 1px solid #1A1A1A; -webkit-transition: background .5s; -moz-transition: background .5s; -o-transition: background .5s; -ms-transition: background .5s; transition: background .5s; } .sidebar_name { padding-top: 25px; color: #fff; opacity: .7; } .sidebar-nav li { line-height: 40px; text-indent: 20px; } .sidebar-nav li a { color: #999999; display: block; text-decoration: none; } .sidebar-nav li a:hover { color: #fff; background: rgba(255,255,255,0.2); text-decoration: none; } .sidebar-nav li a:active, .sidebar-nav li a:focus { text-decoration: none; } .sidebar-nav > .sidebar-brand { height: 65px; line-height: 60px; font-size: 18px; } .sidebar-nav > .sidebar-brand a { color: #999999; } .sidebar-nav > .sidebar-brand a:hover { color: #fff; background: none; } #main_icon { float:right; padding-right: 65px; padding-top:20px; } .sub_icon { float:right; padding-right: 65px; padding-top:10px; } .content-header { height: 65px; line-height: 65px; } .content-header h1 { margin: 0; margin-left: 20px; line-height: 65px; display: inline-block; } @media (max-width:767px) { #wrapper { padding-left: 70px; transition: all .4s ease 0s; } #sidebar-wrapper { left: 70px; } #wrapper.active { padding-left: 150px; } #wrapper.active #sidebar-wrapper { left: 150px; width: 150px; body{margin:40px;} .btn-circle { width: 30px; height: 30px; text-align: center; padding: 6px 0; font-size: 12px; line-height: 1.428571429; border-radius: 15px; } .btn-circle.btn-lg { width: 50px; height: 50px; padding: 10px 16px; font-size: 18px; line-height: 1.33; border-radius: 25px; } .btn-circle.btn-xl { width: 70px; height: 70px; padding: 10px 16px; font-size: 24px; line-height: 1.33; border-radius: 35px; } transition: all .4s ease 0s; } } <div class="row"> <button class="btn btn-sm btn-default">Default</button> <button class="btn btn-sm btn-primary">Primary</button> <button class="btn btn-sm btn-info">Info</button> <button class="btn btn-sm btn-success">Success</button> <button class="btn btn-sm btn-danger">Danger</button> <button class="btn btn-sm btn-warning">Warning</button> <br> <br> <button class="btn btn-default">Default</button> <button class="btn btn-primary">Primary</button> <button class="btn btn-info">Info</button> <button class="btn btn-success">Success</button> <button class="btn btn-danger">Danger</button> <button class="btn btn-warning">Warning</button> <br> <br> <button class="btn btn-lg btn-default">Default</button> <button class="btn btn-lg btn-primary">Primary</button> <button class="btn btn-lg btn-info">Info</button> <button class="btn btn-lg btn-success">Success</button> <button class="btn btn-lg btn-danger">Danger</button> <button class="btn btn-lg btn-warning">Warning</button> </div>
$("#menu-toggle").click(function(e) { e.preventDefault(); $("#wrapper").toggleClass("active"); });

Related: See More


Questions / Comments: