<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');
});
});