"Resposnisve Collapseable Sidebar Menu"
Bootstrap 3.0.0 Snippet by Siddharth Panchal

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.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ---------->
<html>
<title>Collapseable Sidebar Menu</title>
<head>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div id="wrapper">
<div class="overlay"></div>
<nav class="navbar navbar-inverse navbar-fixed-top" id="sidebar-wrapper" role="navigation">
<ul class="nav sidebar-nav">
<li class="sidebar-brand"> <a href="#" class="text-shadow"> Sidebar Menu </a> <hr></li>
<li> <a href="#"><i class="fa fa-fw fa-home"></i> Home</a> </li>
<li> <a href="#"><i class="fa fa-fw fa-folder"></i> Page one</a> </li>
<li> <a href="#"><i class="fa fa-fw fa-file-o"></i> Second page</a> </li>
<li> <a href="#"><i class="fa fa-fw fa-cog"></i> Third page</a> </li>
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-fw fa-plus"></i> Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li class="dropdown-header">Dropdown heading</li>
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
<li> <a href="#"><i class="fa fa-fw fa-bank"></i> Page four</a> </li>
<li> <a href="#"><i class="fa fa-fw fa-dropbox"></i> Page 5</a> </li>
<li> <a href="#"><i class="fa fa-fw fa-twitter"></i> Last page</a> </li>
</ul>
</nav>
<!-- /#sidebar-wrapper -->
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
h1{font-size:36px;}h2{font-size:30px;}h3{font-size:24px;}h4{font-size:20px;}h5{font-size:18px;}h6{font-size:16px;}.w3-serif{font-family:serif;}
h1,h2,h3,h4,h5,h6{font-family:"Segoe UI",Arial,sans-serif;font-weight:400;margin:10px 0px;}
body {position: relative;overflow-x: hidden;}
body, html{height: 100%;background-color: #FD443A;}
body h1, body h2, body h3, body h4 { color: rgba(255, 255, 255, 0.9); }
body p, body blockquote { color: rgba(255, 255, 255, 0.7); }
body a {color: rgba(255, 255, 255, 0.8);text-decoration: underline;}
body p{text-align: justify;}
body a:hover { color: #ffffff;}
.w3-wide{letter-spacing:4px;}
.text-shadow{1px 1px 1px #000;}
hr{border:0;border-top:1px solid #eee;margin:20px 0}
.nav .open > a { background-color: transparent; }
.nav .open > a:hover { background-color: transparent; }
.nav .open > a:focus { background-color: transparent; }
/* Wrappers */
#wrapper{background:#FD443A;}
#wrapper.toggled { padding-left: 220px; }
#wrapper.toggled #sidebar-wrapper { width: 220px; }
#sidebar-wrapper::-webkit-scrollbar{display: none;}
#page-content-wrapper {padding-top: 70px;width: 100%;}
#wrapper {-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;-webkit-transition: all 0.5s ease;padding-left: 0;-webkit-transition: all 0.5s ease;transition: all 0.5s ease;}
#wrapper.toggled #page-content-wrapper{margin-right: -220px;position: absolute;}
#sidebar-wrapper {-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;-webkit-transition: all 0.5s ease;background: #1a1a1a;height: 100%;left: 220px;margin-left: -220px;overflow-x: hidden;overflow-y: auto;-webkit-transition: all 0.5s ease;transition: all 0.5s ease;width: 0;z-index: 1000;box-shadow: 1px 4px 8px 4px rgba(0,0,0,0.3);}
/* Sidebar nav styles */
.sidebar-nav {list-style: none;margin: 0;padding: 0;position: absolute;top: 0;width: 220px;}
.sidebar-nav li {display: inline-block;line-height: 20px;position: relative;width: 100%;}
.sidebar-nav li:before {-moz-transition: width 0.2s ease-in;-ms-transition: width 0.2s ease-in;-webkit-transition: width 0.2s ease-in;background-color: #1c1c1c;content: '';height: 100%;left: 0;position: absolute;top: 0;-webkit-transition: width 0.2s ease-in;transition: width 0.2s ease-in;width: 3px;z-index: -1;}
.sidebar-nav li:first-child a {background-color: #1a1a1a;color: #ffffff;}
.sidebar-nav li:nth-child(2):before { background-color: #FF453E; }
.sidebar-nav li:nth-child(3):before { background-color: #3AB05A; }
.sidebar-nav li:nth-child(4):before { background-color: #FF992C; }
.sidebar-nav li:nth-child(5):before { background-color: #0094EE; }
.sidebar-nav li:nth-child(6):before { background-color: #8473be; }
.sidebar-nav li:nth-child(7):before { background-color: #009688; }
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
$(document).ready(function () {
var trigger = $('.hamburger'),
overlay = $('.overlay'),
isClosed = false;
trigger.click(function (){
hamburger_cross();
});
function hamburger_cross(){
if (isClosed == true) {
overlay.hide();
trigger.removeClass('is-open');
trigger.addClass('is-closed');
isClosed = false;
} else {
overlay.show();
trigger.removeClass('is-closed');
trigger.addClass('is-open');
isClosed = true;
}
}
$('[data-toggle="offcanvas"]').click(function (){
$('#wrapper').toggleClass('toggled');
});
$('[data-toggle="tooltip"]').tooltip();
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Gaia Bootstrap Template Pro
sidebar.rtl
Bootstrap NavBar Menu Dropdowns http://fontenele.github.io/bootstrap-navbar-dropdowns/
Content + Sidebar BS4

Questions / Comments: