Bootstrap Snippet Fancy Sidebar Navigation using HTML CSS Bootstrap jQuery

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="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ---------->
    <div id="wrapper" class="closed">
        <div class="overlay"></div>
    
        <!-- Sidebar -->
        <nav class="navbar navbar-inverse navbar-fixed-top sidebar-wrapper" role="navigation">
            <ul class="nav sidebar-nav">
                <li class="sidebar-brand">
                    <a href="#">
                       Brand
                    </a>
                </li>
                <li>
                    <a href="#">Home</a>
                </li>
                <li>
                    <a href="#">About</a>
                </li>
                <li>
                    <a href="#">Events</a>
                </li>
                <li>
                    <a href="#">Team</a>
                </li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Works <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>
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 {
    position: relative;
    overflow-x: hidden;
}
body,
html { height: 100%;}
.nav .open > a, 
.nav .open > a:hover, 
.nav .open > a:focus {background-color: transparent;}
/*-------------------------------*/
/*           Wrappers            */
/*-------------------------------*/
@media(max-width:991px){
#wrapper.closed .sidebar-wrapper {  width: 0 ; }
#wrapper.closed #page-content-wrapper {
    width: 100%;
    padding-top: 70px;
}
#wrapper.open .sidebar-wrapper { width: 220px; }
#wrapper.open { padding-left: 220px; }
#wrapper.open #page-content-wrapper {
    position: absolute;
    margin-right: -220px;
}
}
@media(min-width:992px){
#wrapper .sidebar-wrapper { width: 220px; }
#wrapper { padding-left: 220px; }
#wrapper .container { margin-left : 220px ; }
}
#wrapper {
    padding-left: 0;
    -webkit-transition: all 0.5s ease;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
$(document).ready(function () {
    $('.hamburger').click(function () {
        $('#wrapper').toggleClass('open');
        $('#wrapper').toggleClass('closed');
    });
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Fancy Sidebar Navigation"
Bootstrap 3.3.0 Snippet by theklf99

Related: See More

Questions / Comments:

"Fancy Sidebar Navigation" Bootstrap 3.3.0 Snippet by theklf99

Related: See More

Questions / Comments:

"Fancy Sidebar Navigation"
Bootstrap 3.3.0 Snippet by theklf99