"Responsive Sidebar With 2 Levels Menu"
Bootstrap 3.2.0 Snippet by walidh93

<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 ----------> <nav class="navbar navbar-default" role="navigation"> <div class="container"> <div class="navbar-header"> <a id="menu-toggle" href="#" class="navbar-toggle pull-left"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <a class="navbar-brand" href="#"> logo </a> </div> <div id="sidebar-wrapper" class="sidebar-toggle"> <div id="nav-menu"> <div class="submenu"> <div class="submenu-heading" data-parent="#nav-menu" data-toggle="collapse" data-target="#submenu1"> <h4 class="submenu-title">Title 1</h4> </div> <div class="submenu-body collapse" id="submenu1"> <div class="list-group"> <a href="#" class="list-group-item">Item 1</a> <a href="#" class="list-group-item">Item 2</a> <a href="#" class="list-group-item">Item 3</a> <a href="#" class="list-group-item">Item 4</a> </div> </div> </div> <div class="submenu"> <div class="submenu-heading" data-parent="#nav-menu" data-toggle="collapse" data-target="#submenu2"> <h4 class="submenu-title">Title 2</h4> </div> <div class="submenu-body collapse" id="submenu2"> <div class="list-group"> <a href="#" class="list-group-item">Item 1</a> <a href="#" class="list-group-item">Item 2</a> <a href="#" class="list-group-item">Item 3</a> <a href="#" class="list-group-item">Item 4</a> </div> </div> </div> <div class="submenu"> <div class="submenu-heading" data-parent="#nav-menu" data-toggle="collapse" data-target="#submenu3"> <h4 class="submenu-title">Title 3</h4> </div> <div class="submenu-body collapse" id="submenu3"> <div class="list-group"> <a href="#" class="list-group-item">Item 1</a> <a href="#" class="list-group-item">Item 2</a> <a href="#" class="list-group-item">Item 3</a> <a href="#" class="list-group-item">Item 4</a> </div> </div> </div> </div> </div> </div> </nav> <div id="page-wrapper"> Page contents </div>
nav { z-index: 1; } #sidebar-wrapper { top: 52px; left: -200px; width: 200px; background-color: #5677fc; color: white; position: fixed; height: 100%; z-index: 1; } .sidebar-nav { position: absolute; top: 0; margin: 0; padding: 0; width: 250px; list-style: none; } #sidebar-wrapper.sidebar-toggle { transition: all 0.3s ease-out; margin-left: -200px; } @media (min-width: 768px) { #sidebar-wrapper.sidebar-toggle { transition: 0s; left: 200px; } #page-wrapper { margin-left: 200px; } } .submenu-heading { padding: 15px; cursor: pointer; } .submenu-heading h4 { margin: 0; } .submenu-heading:hover { background: rgba(255, 255, 255, .5); color: rgba(0, 0, 0, .6); } .submenu .list-group { margin: 0; } .submenu .list-group-item { border-radius: 0; background: rgba(0, 0, 0, .07); border: 0; color: white; padding: .75em 1.7em; } .submenu .list-group-item:hover { background: rgba(255, 255, 255, .5); }
$(window).resize(function() { var path = $(this); var contW = path.width(); if(contW >= 751){ document.getElementsByClassName("sidebar-toggle")[0].style.left="200px"; }else{ document.getElementsByClassName("sidebar-toggle")[0].style.left="-200px"; } }); $(document).ready(function() { $('.dropdown').on('show.bs.dropdown', function(e){ $(this).find('.dropdown-menu').first().stop(true, true).slideDown(300); }); $('.dropdown').on('hide.bs.dropdown', function(e){ $(this).find('.dropdown-menu').first().stop(true, true).slideUp(300); }); toggleMenu = function() { var elem = document.getElementById("sidebar-wrapper"); left = window.getComputedStyle(elem,null).getPropertyValue("left"); // hiding the sidebar if(left == "200px"){ document.getElementsByClassName("sidebar-toggle")[0].style.left="-200px"; $('#overlay').css('opacity', 0); setTimeout(function() { $('#overlay').remove(); }, 300); } // showing the sidebar else if(left == "-200px"){ document.getElementsByClassName("sidebar-toggle")[0].style.left="200px"; // adding overlay to darken #page-wrapper and dismiss the left drawer... $overlay = $('<div id="overlay" style="position: absolute; height: 100%; width: 100%; top: 0; left: 0; background: rgb(0, 0, 0); opacity: 0; transition: ease-in-out all .3s"></div>'); $overlay.click(toggleMenu); setTimeout(function() { $overlay.css('opacity', .1); }, 200); $('#page-wrapper').prepend($overlay); } } $("#menu-toggle").click(function(e) { e.preventDefault(); toggleMenu(); }); $("[data-parent]").click(function(e) { console.log('clicked'); $parent = $($(this).attr('data-parent')); actives = $parent.find('.in:not(data-target)'.replace('data-target', $(this).attr('data-target'))); actives.collapse('hide'); }); });

Related: See More


Questions / Comments: