I am building a browser-based mobile app and I've decided to use Bootstrap 3 as the css framework for the design. Bootstrap 3 comes with a great "responsive" feature in the navigation bar where it collapses automatically if it detects a specific "break point" regarding the resolution of the browser. It works in a lot of situations.
But have you noticed lately how a lot of browser-based mobile apps have the primary navigation hidden out of the left of the screen, and when the toggle icon is pressed (toggled) in the top-right corner, the primary navigation slides out to the right about 2/3 of the way into the screen? This is an increasingly popular solution for navigating through browser-based apps on mobile devices and I think in theory it should be pretty easy to modify bootstrap css/js to accommodate this version of the navigation collapse feature.
How can these feature be implemented? It seems like it shouldn't take too much modification. I'd really like to hear your thoughts/solutions on this matter. Also, I think it would be a great long-term solution for Bootstrap to implement as a built-in feature.
Unfortunately I have not made any attempts to create this feature because while I am familiar with these technologies, I am predominantly a PHP/MySQL developer and I believe a feature as useful as this should be built by experts with insight that I don't have as a front-end developer.
This question is related to
css
twitter-bootstrap
mobile
twitter-bootstrap-3
Without Plugin, we can do this; bootstrap multi-level responsive menu for mobile phone with slide toggle for mobile:
$('[data-toggle="slide-collapse"]').on('click', function() {_x000D_
$navMenuCont = $($(this).data('target'));_x000D_
$navMenuCont.animate({_x000D_
'width': 'toggle'_x000D_
}, 350);_x000D_
$(".menu-overlay").fadeIn(500);_x000D_
});_x000D_
_x000D_
$(".menu-overlay").click(function(event) {_x000D_
$(".navbar-toggle").trigger("click");_x000D_
$(".menu-overlay").fadeOut(500);_x000D_
});_x000D_
_x000D_
// if ($(window).width() >= 767) {_x000D_
// $('ul.nav li.dropdown').hover(function() {_x000D_
// $(this).find('>.dropdown-menu').stop(true, true).delay(200).fadeIn(500);_x000D_
// }, function() {_x000D_
// $(this).find('>.dropdown-menu').stop(true, true).delay(200).fadeOut(500);_x000D_
// });_x000D_
_x000D_
// $('ul.nav li.dropdown-submenu').hover(function() {_x000D_
// $(this).find('>.dropdown-menu').stop(true, true).delay(200).fadeIn(500);_x000D_
// }, function() {_x000D_
// $(this).find('>.dropdown-menu').stop(true, true).delay(200).fadeOut(500);_x000D_
// });_x000D_
_x000D_
_x000D_
// $('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {_x000D_
// event.preventDefault();_x000D_
// event.stopPropagation();_x000D_
// $(this).parent().siblings().removeClass('open');_x000D_
// $(this).parent().toggleClass('open');_x000D_
// $('b', this).toggleClass("caret caret-up");_x000D_
// });_x000D_
// }_x000D_
_x000D_
// $(window).resize(function() {_x000D_
// if( $(this).width() >= 767) {_x000D_
// $('ul.nav li.dropdown').hover(function() {_x000D_
// $(this).find('>.dropdown-menu').stop(true, true).delay(200).fadeIn(500);_x000D_
// }, function() {_x000D_
// $(this).find('>.dropdown-menu').stop(true, true).delay(200).fadeOut(500);_x000D_
// });_x000D_
// }_x000D_
// });_x000D_
_x000D_
var windowWidth = $(window).width();_x000D_
if (windowWidth > 767) {_x000D_
// $('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {_x000D_
// event.preventDefault();_x000D_
// event.stopPropagation();_x000D_
// $(this).parent().siblings().removeClass('open');_x000D_
// $(this).parent().toggleClass('open');_x000D_
// $('b', this).toggleClass("caret caret-up");_x000D_
// });_x000D_
_x000D_
$('ul.nav li.dropdown').hover(function() {_x000D_
$(this).find('>.dropdown-menu').stop(true, true).delay(200).fadeIn(500);_x000D_
}, function() {_x000D_
$(this).find('>.dropdown-menu').stop(true, true).delay(200).fadeOut(500);_x000D_
});_x000D_
_x000D_
$('ul.nav li.dropdown-submenu').hover(function() {_x000D_
$(this).find('>.dropdown-menu').stop(true, true).delay(200).fadeIn(500);_x000D_
}, function() {_x000D_
$(this).find('>.dropdown-menu').stop(true, true).delay(200).fadeOut(500);_x000D_
});_x000D_
_x000D_
_x000D_
$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {_x000D_
event.preventDefault();_x000D_
event.stopPropagation();_x000D_
$(this).parent().siblings().removeClass('open');_x000D_
$(this).parent().toggleClass('open');_x000D_
// $('b', this).toggleClass("caret caret-up");_x000D_
});_x000D_
}_x000D_
if (windowWidth < 767) {_x000D_
$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {_x000D_
event.preventDefault();_x000D_
event.stopPropagation();_x000D_
$(this).parent().siblings().removeClass('open');_x000D_
$(this).parent().toggleClass('open');_x000D_
// $('b', this).toggleClass("caret caret-up");_x000D_
});_x000D_
}_x000D_
_x000D_
// $('.dropdown a').append('Some text');
_x000D_
@media only screen and (max-width: 767px) {_x000D_
#slide-navbar-collapse {_x000D_
position: fixed;_x000D_
top: 0;_x000D_
left: 15px;_x000D_
z-index: 999999;_x000D_
width: 280px;_x000D_
height: 100%;_x000D_
background-color: #f9f9f9;_x000D_
overflow: auto;_x000D_
bottom: 0;_x000D_
max-height: inherit;_x000D_
}_x000D_
.menu-overlay {_x000D_
display: none;_x000D_
background-color: #000;_x000D_
bottom: 0;_x000D_
left: 0;_x000D_
opacity: 0.5;_x000D_
filter: alpha(opacity=50);_x000D_
/* IE7 & 8 */_x000D_
position: fixed;_x000D_
right: 0;_x000D_
top: 0;_x000D_
z-index: 49;_x000D_
}_x000D_
.navbar-fixed-top {_x000D_
position: initial !important;_x000D_
}_x000D_
.navbar-nav .open .dropdown-menu {_x000D_
background-color: #ffffff;_x000D_
}_x000D_
ul.nav.navbar-nav li {_x000D_
border-bottom: 1px solid #eee;_x000D_
}_x000D_
.navbar-nav .open .dropdown-menu .dropdown-header,_x000D_
.navbar-nav .open .dropdown-menu>li>a {_x000D_
padding: 10px 20px 10px 15px;_x000D_
}_x000D_
}_x000D_
_x000D_
.dropdown-submenu {_x000D_
position: relative;_x000D_
}_x000D_
_x000D_
.dropdown-submenu .dropdown-menu {_x000D_
top: 0;_x000D_
left: 100%;_x000D_
margin-top: -1px;_x000D_
}_x000D_
_x000D_
li.dropdown a {_x000D_
display: block;_x000D_
position: relative;_x000D_
}_x000D_
_x000D_
li.dropdown>a:before {_x000D_
content: "\f107";_x000D_
font-family: FontAwesome;_x000D_
position: absolute;_x000D_
right: 6px;_x000D_
top: 5px;_x000D_
font-size: 15px;_x000D_
}_x000D_
_x000D_
li.dropdown-submenu>a:before {_x000D_
content: "\f107";_x000D_
font-family: FontAwesome;_x000D_
position: absolute;_x000D_
right: 6px;_x000D_
top: 10px;_x000D_
font-size: 15px;_x000D_
}_x000D_
_x000D_
ul.dropdown-menu li {_x000D_
border-bottom: 1px solid #eee;_x000D_
}_x000D_
_x000D_
.dropdown-menu {_x000D_
padding: 0px;_x000D_
margin: 0px;_x000D_
border: none !important;_x000D_
}_x000D_
_x000D_
li.dropdown.open {_x000D_
border-bottom: 0px !important;_x000D_
}_x000D_
_x000D_
li.dropdown-submenu.open {_x000D_
border-bottom: 0px !important;_x000D_
}_x000D_
_x000D_
li.dropdown-submenu>a {_x000D_
font-weight: bold !important;_x000D_
}_x000D_
_x000D_
li.dropdown>a {_x000D_
font-weight: bold !important;_x000D_
}_x000D_
_x000D_
.navbar-default .navbar-nav>li>a {_x000D_
font-weight: bold !important;_x000D_
padding: 10px 20px 10px 15px;_x000D_
}_x000D_
_x000D_
li.dropdown>a:before {_x000D_
content: "\f107";_x000D_
font-family: FontAwesome;_x000D_
position: absolute;_x000D_
right: 6px;_x000D_
top: 9px;_x000D_
font-size: 15px;_x000D_
}_x000D_
_x000D_
@media (min-width: 767px) {_x000D_
li.dropdown-submenu>a {_x000D_
padding: 10px 20px 10px 15px;_x000D_
}_x000D_
li.dropdown>a:before {_x000D_
content: "\f107";_x000D_
font-family: FontAwesome;_x000D_
position: absolute;_x000D_
right: 3px;_x000D_
top: 12px;_x000D_
font-size: 15px;_x000D_
}_x000D_
}
_x000D_
<!DOCTYPE html>_x000D_
<html lang="en">_x000D_
_x000D_
<head>_x000D_
<title>Bootstrap Example</title>_x000D_
<meta charset="utf-8">_x000D_
<meta name="viewport" content="width=device-width, initial-scale=1">_x000D_
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>_x000D_
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>_x000D_
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">_x000D_
_x000D_
</head>_x000D_
_x000D_
<body>_x000D_
<nav class="navbar navbar-default navbar-fixed-top">_x000D_
<div class="container-fluid">_x000D_
<!-- Brand and toggle get grouped for better mobile display -->_x000D_
<div class="navbar-header">_x000D_
<button type="button" class="navbar-toggle collapsed" data-toggle="slide-collapse" data-target="#slide-navbar-collapse" aria-expanded="false">_x000D_
<span class="sr-only">Toggle navigation</span>_x000D_
<span class="icon-bar"></span>_x000D_
<span class="icon-bar"></span>_x000D_
<span class="icon-bar"></span>_x000D_
</button>_x000D_
<a class="navbar-brand" href="#">Brand</a>_x000D_
</div>_x000D_
<!-- Collect the nav links, forms, and other content for toggling -->_x000D_
<div class="collapse navbar-collapse" id="slide-navbar-collapse">_x000D_
<ul class="nav navbar-nav">_x000D_
<li><a href="#">Link <span class="sr-only">(current)</span></a></li>_x000D_
<li><a href="#">Link</a></li>_x000D_
<li class="dropdown">_x000D_
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</span></a>_x000D_
<ul class="dropdown-menu">_x000D_
<li><a href="#">Action</a></li>_x000D_
<li><a href="#">Another action</a></li>_x000D_
<li><a href="#">Something else here</a></li>_x000D_
<li><a href="#">Separated link</a></li>_x000D_
<li><a href="#">One more separated link</a></li>_x000D_
<li class="dropdown-submenu">_x000D_
<a href="#" data-toggle="dropdown">SubMenu 1</span></a>_x000D_
<ul class="dropdown-menu">_x000D_
<li><a href="#">3rd level dropdown</a></li>_x000D_
<li><a href="#">3rd level dropdown</a></li>_x000D_
<li><a href="#">3rd level dropdown</a></li>_x000D_
<li><a href="#">3rd level dropdown</a></li>_x000D_
<li><a href="#">3rd level dropdown</a></li>_x000D_
<li class="dropdown-submenu">_x000D_
<a href="#" data-toggle="dropdown">SubMenu 2</span></a>_x000D_
<ul class="dropdown-menu">_x000D_
<li><a href="#">3rd level dropdown</a></li>_x000D_
<li><a href="#">3rd level dropdown</a></li>_x000D_
<li><a href="#">3rd level dropdown</a></li>_x000D_
<li><a href="#">3rd level dropdown</a></li>_x000D_
<li><a href="#">3rd level dropdown</a></li>_x000D_
</ul>_x000D_
</li>_x000D_
</ul>_x000D_
</li>_x000D_
</ul>_x000D_
</li>_x000D_
<li><a href="#">Link</a></li>_x000D_
</ul>_x000D_
<ul class="nav navbar-nav navbar-right">_x000D_
<li><a href="#">Link</a></li>_x000D_
<li class="dropdown">_x000D_
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</span></a>_x000D_
<ul class="dropdown-menu">_x000D_
<li><a href="#">Action</a></li>_x000D_
<li><a href="#">Another action</a></li>_x000D_
<li><a href="#">Something else here</a></li>_x000D_
<li><a href="#">Separated link</a></li>_x000D_
</ul>_x000D_
</li>_x000D_
</ul>_x000D_
</div>_x000D_
<!-- /.navbar-collapse -->_x000D_
</div>_x000D_
<!-- /.container-fluid -->_x000D_
</nav>_x000D_
<div class="menu-overlay"></div>_x000D_
<div class="col-md-12">_x000D_
<h1>Resize the window to see the result</h1>_x000D_
<p>_x000D_
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non bibendum sem, et sodales massa. Proin quis velit vel nisl imperdiet rhoncus vitae id tortor. Praesent blandit tellus in enim sollicitudin rutrum. Integer ullamcorper, augue ut tristique_x000D_
ultrices, augue magna placerat ex, ac varius mauris ante sed dui. Fusce ullamcorper vulputate magna, a malesuada nunc pellentesque sit amet. Donec posuere placerat erat, sed ornare enim aliquam vitae. Nullam pellentesque auctor augue, vel commodo_x000D_
dolor porta ac. Sed libero eros, fringilla ac lorem in, blandit scelerisque lorem. Suspendisse iaculis justo velit, sit amet fringilla velit ornare a. Sed consectetur quam eget ipsum luctus bibendum. Ut nisi lectus, viverra vitae ipsum sit amet,_x000D_
condimentum condimentum neque. In maximus suscipit eros ut eleifend. Donec venenatis mauris nulla, ac bibendum metus bibendum vel._x000D_
</p>_x000D_
<p>_x000D_
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non bibendum sem, et sodales massa. Proin quis velit vel nisl imperdiet rhoncus vitae id tortor. Praesent blandit tellus in enim sollicitudin rutrum. Integer ullamcorper, augue ut tristique_x000D_
ultrices, augue magna placerat ex, ac varius mauris ante sed dui. Fusce ullamcorper vulputate magna, a malesuada nunc pellentesque sit amet. Donec posuere placerat erat, sed ornare enim aliquam vitae. Nullam pellentesque auctor augue, vel commodo_x000D_
dolor porta ac. Sed libero eros, fringilla ac lorem in, blandit scelerisque lorem. Suspendisse iaculis justo velit, sit amet fringilla velit ornare a. Sed consectetur quam eget ipsum luctus bibendum. Ut nisi lectus, viverra vitae ipsum sit amet,_x000D_
condimentum condimentum neque. In maximus suscipit eros ut eleifend. Donec venenatis mauris nulla, ac bibendum metus bibendum vel._x000D_
</p>_x000D_
<p>_x000D_
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non bibendum sem, et sodales massa. Proin quis velit vel nisl imperdiet rhoncus vitae id tortor. Praesent blandit tellus in enim sollicitudin rutrum. Integer ullamcorper, augue ut tristique_x000D_
ultrices, augue magna placerat ex, ac varius mauris ante sed dui. Fusce ullamcorper vulputate magna, a malesuada nunc pellentesque sit amet. Donec posuere placerat erat, sed ornare enim aliquam vitae. Nullam pellentesque auctor augue, vel commodo_x000D_
dolor porta ac. Sed libero eros, fringilla ac lorem in, blandit scelerisque lorem. Suspendisse iaculis justo velit, sit amet fringilla velit ornare a. Sed consectetur quam eget ipsum luctus bibendum. Ut nisi lectus, viverra vitae ipsum sit amet,_x000D_
condimentum condimentum neque. In maximus suscipit eros ut eleifend. Donec venenatis mauris nulla, ac bibendum metus bibendum vel._x000D_
</p>_x000D_
<p>_x000D_
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non bibendum sem, et sodales massa. Proin quis velit vel nisl imperdiet rhoncus vitae id tortor. Praesent blandit tellus in enim sollicitudin rutrum. Integer ullamcorper, augue ut tristique_x000D_
ultrices, augue magna placerat ex, ac varius mauris ante sed dui. Fusce ullamcorper vulputate magna, a malesuada nunc pellentesque sit amet. Donec posuere placerat erat, sed ornare enim aliquam vitae. Nullam pellentesque auctor augue, vel commodo_x000D_
dolor porta ac. Sed libero eros, fringilla ac lorem in, blandit scelerisque lorem. Suspendisse iaculis justo velit, sit amet fringilla velit ornare a. Sed consectetur quam eget ipsum luctus bibendum. Ut nisi lectus, viverra vitae ipsum sit amet,_x000D_
condimentum condimentum neque. In maximus suscipit eros ut eleifend. Donec venenatis mauris nulla, ac bibendum metus bibendum vel._x000D_
</p>_x000D_
<p>_x000D_
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non bibendum sem, et sodales massa. Proin quis velit vel nisl imperdiet rhoncus vitae id tortor. Praesent blandit tellus in enim sollicitudin rutrum. Integer ullamcorper, augue ut tristique_x000D_
ultrices, augue magna placerat ex, ac varius mauris ante sed dui. Fusce ullamcorper vulputate magna, a malesuada nunc pellentesque sit amet. Donec posuere placerat erat, sed ornare enim aliquam vitae. Nullam pellentesque auctor augue, vel commodo_x000D_
dolor porta ac. Sed libero eros, fringilla ac lorem in, blandit scelerisque lorem. Suspendisse iaculis justo velit, sit amet fringilla velit ornare a. Sed consectetur quam eget ipsum luctus bibendum. Ut nisi lectus, viverra vitae ipsum sit amet,_x000D_
condimentum condimentum neque. In maximus suscipit eros ut eleifend. Donec venenatis mauris nulla, ac bibendum metus bibendum vel._x000D_
</p>_x000D_
</div>_x000D_
_x000D_
</body>_x000D_
_x000D_
</html>
_x000D_
Bootstrap 4
Create a responsive navbar sidebar "drawer" in Bootstrap 4?
Bootstrap horizontal menu collapse to sidemenu
Bootstrap 3
I think what you're looking for is generally known as an "off-canvas" layout. Here is the standard off-canvas example from the official Bootstrap docs: http://getbootstrap.com/examples/offcanvas/
The "official" example uses a right-side sidebar the toggle off and on separately from the top navbar menu. I also found these off-canvas variations that slide in from the left and may be closer to what you're looking for..
http://www.bootstrapzero.com/bootstrap-template/off-canvas-sidebar http://www.bootstrapzero.com/bootstrap-template/facebook
This was for my own project and I'm sharing it here too.
This one had trouble after 3.2, so the one below may work better for you:
CSS
/* adjust body when menu is open */
body.slide-active {
overflow-x: hidden
}
/*first child of #page-content so it doesn't shift around*/
.no-margin-top {
margin-top: 0px!important
}
/*wrap the entire page content but not nav inside this div if not a fixed top, don't add any top padding */
#page-content {
position: relative;
padding-top: 70px;
left: 0;
}
#page-content.slide-active {
padding-top: 0
}
/* put toggle bars on the left :: not using button */
#slide-nav .navbar-toggle {
cursor: pointer;
position: relative;
line-height: 0;
float: left;
margin: 0;
width: 30px;
height: 40px;
padding: 10px 0 0 0;
border: 0;
background: transparent;
}
/* icon bar prettyup - optional */
#slide-nav .navbar-toggle > .icon-bar {
width: 100%;
display: block;
height: 3px;
margin: 5px 0 0 0;
}
#slide-nav .navbar-toggle.slide-active .icon-bar {
background: orange
}
.navbar-header {
position: relative
}
/* un fix the navbar when active so that all the menu items are accessible */
.navbar.navbar-fixed-top.slide-active {
position: relative
}
/* screw writing importants and shit, just stick it in max width since these classes are not shared between sizes */
@media (max-width:767px) {
#slide-nav .container {
margin: 0;
padding: 0!important;
}
#slide-nav .navbar-header {
margin: 0 auto;
padding: 0 15px;
}
#slide-nav .navbar.slide-active {
position: absolute;
width: 80%;
top: -1px;
z-index: 1000;
}
#slide-nav #slidemenu {
background: #f7f7f7;
left: -100%;
width: 80%;
min-width: 0;
position: absolute;
padding-left: 0;
z-index: 2;
top: -8px;
margin: 0;
}
#slide-nav #slidemenu .navbar-nav {
min-width: 0;
width: 100%;
margin: 0;
}
#slide-nav #slidemenu .navbar-nav .dropdown-menu li a {
min-width: 0;
width: 80%;
white-space: normal;
}
#slide-nav {
border-top: 0
}
#slide-nav.navbar-inverse #slidemenu {
background: #333
}
/* this is behind the navigation but the navigation is not inside it so that the navigation is accessible and scrolls*/
#slide-nav #navbar-height-col {
position: fixed;
top: 0;
height: 100%;
width: 80%;
left: -80%;
background: #eee;
}
#slide-nav.navbar-inverse #navbar-height-col {
background: #333;
z-index: 1;
border: 0;
}
#slide-nav .navbar-form {
width: 100%;
margin: 8px 0;
text-align: center;
overflow: hidden;
/*fast clearfixer*/
}
#slide-nav .navbar-form .form-control {
text-align: center
}
#slide-nav .navbar-form .btn {
width: 100%
}
}
@media (min-width:768px) {
#page-content {
left: 0!important
}
.navbar.navbar-fixed-top.slide-active {
position: fixed
}
.navbar-header {
left: 0!important
}
}
HTML
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation" id="slide-nav">
<div class="container">
<div class="navbar-header">
<a class="navbar-toggle">
<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="#">Project name</a>
</div>
<div id="slidemenu">
<form class="navbar-form navbar-right" role="form">
<div class="form-group">
<input type="search" placeholder="search" class="form-control">
</div>
<button type="submit" class="btn btn-primary">Search</button>
</form>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link test long title goes here</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
jQuery
$(document).ready(function () {
//stick in the fixed 100% height behind the navbar but don't wrap it
$('#slide-nav.navbar .container').append($('<div id="navbar-height-col"></div>'));
// Enter your ids or classes
var toggler = '.navbar-toggle';
var pagewrapper = '#page-content';
var navigationwrapper = '.navbar-header';
var menuwidth = '100%'; // the menu inside the slide menu itself
var slidewidth = '80%';
var menuneg = '-100%';
var slideneg = '-80%';
$("#slide-nav").on("click", toggler, function (e) {
var selected = $(this).hasClass('slide-active');
$('#slidemenu').stop().animate({
left: selected ? menuneg : '0px'
});
$('#navbar-height-col').stop().animate({
left: selected ? slideneg : '0px'
});
$(pagewrapper).stop().animate({
left: selected ? '0px' : slidewidth
});
$(navigationwrapper).stop().animate({
left: selected ? '0px' : slidewidth
});
$(this).toggleClass('slide-active', !selected);
$('#slidemenu').toggleClass('slide-active');
$('#page-content, .navbar, body, .navbar-header').toggleClass('slide-active');
});
var selected = '#slidemenu, #page-content, body, .navbar, .navbar-header';
$(window).on("resize", function () {
if ($(window).width() > 767 && $('.navbar-toggle').is(':hidden')) {
$(selected).removeClass('slide-active');
}
});
});
Source: Stackoverflow.com