"Navigation Sidebar with Toggle"
Bootstrap 3.0.3 Snippet by ingdavidm99

<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"> <!-- 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"/> </a> </li> </ul> <ul class="sidebar-nav" id="sidebar"> <li> <a>Link1<span class="sub_icon glyphicon glyphicon-link"/> </a> </li> <li> <a>link2<span class="sub_icon glyphicon glyphicon-link"/> </a> </li> </ul> </div> </div>
.row{ margin-left:0px; margin-right:0px; } #sidebar-wrapper { margin-left: -150px; left: 0%; 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.active1 #sidebar-wrapper { left: 150px; } #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-nav li { line-height: 40px; text-indent: 20px; } .sidebar-nav > .sidebar-brand { height: 65px; line-height: 60px; font-size: 18px; } #main_icon { float:right; padding-right: 65px; padding-top:20px; } .sub_icon { float:right; padding-right: 65px; padding-top:10px; }

Related: See More


Questions / Comments: