"Sidebar Responsive"
Bootstrap 3.2.0 Snippet by crismaster

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
<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">
<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="home.xhtml">
logo
</a>
</div>
<div id="sidebar-wrapper" class="sidebar-toggle">
<ul class="sidebar-nav">
<li>
<a href="#item1">Item 1</a>
</li>
<li>
<a href="#item2">Item 2</a>
</li>
<li>
<a href="#item3">Item 3</a>
</li>
</ul>
</div>
</div>
</nav>
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
#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-nav li {
text-indent: 20px;
line-height: 50px;
}
.sidebar-nav li a {
color: white;
display: block;
text-decoration: none;
}
.sidebar-nav li a:hover {
background: rgba(255,255,255,0.25);
color: white;
text-decoration: none;
}
.sidebar-nav li a:active, .sidebar-nav li a:focus {
text-decoration: none;
}
#sidebar-wrapper.sidebar-toggle {
transition: all 0.3s ease-out;
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
$(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);
});
$("#menu-toggle").click(function(e) {
e.preventDefault();
var elem = document.getElementById("sidebar-wrapper");
left = window.getComputedStyle(elem,null).getPropertyValue("left");
if(left == "200px"){
document.getElementsByClassName("sidebar-toggle")[0].style.left="-200px";
}
else if(left == "-200px"){
document.getElementsByClassName("sidebar-toggle")[0].style.left="200px";
}
});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: