"Responsive Sidebar Menu"
Bootstrap 3.2.0 Snippet by TerryTel93

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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-inverse sidebar" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-sidebar-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-sidebar-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home<span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-home"></span></a></li>
<li ><a href="#">Profile<span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-user"></span></a></li>
<li ><a href="#">Messages<span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-envelope"></span></a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Settings <span class="caret"></span><span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-cog"></span></a>
<ul class="dropdown-menu forAnimate" role="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><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
<li><a href="#">Home<span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-home"></span></a></li>
<li ><a href="#">Profile<span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-user"></span></a></li>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
body,html{
height: 100%;
}
/* remove outer padding */
.main .row{
padding: 0px;
margin: 0px;
}
/*Remove rounded coners*/
nav.sidebar.navbar {
border-radius: 0px;
}
nav.sidebar, .main{
-webkit-transition: margin 200ms ease-out;
-moz-transition: margin 200ms ease-out;
-o-transition: margin 200ms ease-out;
transition: margin 200ms ease-out;
}
/* Add gap to nav and right windows.*/
.main{
padding: 10px 10px 0 10px;
}
/* .....NavBar: Icon only with coloring/layout.....*/
/*small/medium side display*/
@media (min-width: 768px) {
/*Allow main to be next to Nav*/
.main{
position: absolute;
width: calc(100% - 40px); /*keeps 100% minus nav size*/
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
function htmlbodyHeightUpdate(){
var height3 = $( window ).height()
var height1 = $('.nav').height()+50
height2 = $('.main').height()
if(height2 > height3){
$('html').height(Math.max(height1,height3,height2)+10);
$('body').height(Math.max(height1,height3,height2)+10);
}
else
{
$('html').height(Math.max(height1,height3,height2));
$('body').height(Math.max(height1,height3,height2));
}
}
$(document).ready(function () {
htmlbodyHeightUpdate()
$( window ).resize(function() {
htmlbodyHeightUpdate()
});
$( window ).scroll(function() {
height2 = $('.main').height()
htmlbodyHeightUpdate()
});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Gaia Bootstrap Template
sidebar.rtl
Responsive Invoice template
Responsive Data Cards (Bootstrap 4)

Questions / Comments:

can i download the source code sample?

johnnny911 () - 5 years ago - Reply 0

I am unable to view the code.

How can i see code for references

hakim12345 () - 6 years ago - Reply 0

how I can use these scripts in dreamweaver ? can someone explain /

Aamir Sarfaraz () - 7 years ago - Reply 0

Hi, thanks for this nice snippet but i have one problem. The menu worked for me on desktop but it isn't responsive on a mobile device. any suggestions ?

JP () - 8 years ago - Reply 0

Same problem. :(

Fernando Manome () - 7 years ago - Reply 0

sorry i'm newbie in bootstrap, if i want to use this sidebar, what else that i need to add in this code? can someone share your full code? thank you :)

Sasun Karapetyan () - 8 years ago - Reply 0

Is that what you want?

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn..." integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn..." integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<script src="http://code.jquery.com/jque..."></script>

<script src="https://maxcdn.bootstrapcdn..." integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Tobias Sette () - 8 years ago - Reply 0

Hi, great sidebar! How to disable collapse?

Ivan Stojkovic () - 9 years ago - Reply 0

How We Remove The Scroll....

Azhar Rao () - 9 years ago - Reply 0

sorry i'm newbie in bootstrap, if i want to use this sidebar, what else that i need to add in this code? can someone share your full code? thank you :)

sisFana () - 9 years ago - Reply 0

Excellent man, you are a genius, thanks.

ulluDada () - 9 years ago - Reply 0

Very cool ! When i'm hovering over the sidebar, horizontal scroll bars are appearing in my browser window. Any way i could prevent this behaviour ?

Matthieu () - 9 years ago - Reply 0

the drop down submenu does not appear

Chaitanya Dwived () - 9 years ago - Reply 0

Thanks terry! Simple and works as intended!

joe ni () - 9 years ago - Reply 0

hi men, thanks for this code, but how i can modificate the JS for resize the meni for a <div>-size not for the windows size

Jorge Bolivar () - 9 years ago - Reply 0