Bootstrap Snippet left side nav 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">
        <div class="overlay"></div>
    
        <!-- Sidebar -->
        <nav class="navbar navbar-inverse navbar-fixed-top" id="sidebar-wrapper" role="navigation">
            <ul class="nav sidebar-nav">
                <li class="sidebar-brand">
                    <a href="/default.aspx">
                       <img class="img-responsive brand" src="http://ljungs.nu/images/ljungs-inverted.png"/>
                    </a>
                </li>
                <li>
                    <a href="/default.aspx">Hem</a>
                </li>
                <li>
                    <a href="#">Seminarium</a>
                </li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Vad vi gör <span class="caret"></span></a>
                  <ul class="dropdown-menu" role="menu">
                    <li><a href="/digital-marknadsforing.aspx">Digital marknadsföring</a></li>
                    <li><a href="/systemutveckling.aspx">Systemutveckling</a></li>
                    <li><a href="/webblosningar.apsx">Webblösningar</a></li>
                    <li><a href="/ehandel.aspx">E-handel</a></li>
                    <li><a href="/print.aspx">Print</a></li>
                  </ul>
                </li>
                <li>
                    <a href="/kunder.aspx">Kunder</a>
                </li>
                <li>
                    <a href="/kontakt.apsx">Kontakt</a>
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            */
/*-------------------------------*/
.brand{
    width: 70%;
    margin: 20px 0;
}
#wrapper {
    padding-left: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
#wrapper.toggled {
    padding-left: 220px;
}
#sidebar-wrapper {
    z-index: 1000;
    left: 220px;
    width: 0;
    height: 100%;
    margin-left: -220px;
    overflow-y: auto;
    overflow-x: hidden;
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
$(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');
  });  
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"left side nav"
Bootstrap 3.3.0 Snippet by enghed

Related: See More

Questions / Comments:

"left side nav" Bootstrap 3.3.0 Snippet by enghed

Related: See More

Questions / Comments:

"left side nav"
Bootstrap 3.3.0 Snippet by enghed