Bootstrap Snippet Sidebar navigation with Scrollspy using HTML CSS Bootstrap Javascript

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.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 ---------->
<!-- fixed navigation bar -->
        <div class="navbar navbar-fixed-top navbar-inverse" role="navigation">
            
                
                <div class="navbar-header">
                    <a id="menu-toggle" href="#" class="navbar-brand glyphicon glyphicon-align-justify btn-menu toggle pull-left">
                        
                    </a>
                    
                    <a class="navbar-brand" href="Index">LiveCamChat</a>
                </div>
                <div class="collapse navbar-collapse" id="b-menu-1">
                    <ul class="nav navbar-nav navbar-right">
                        <li class="active">
                            <a href="Index">Home</a>
                        </li>
                        <li>
                            <a href="#">AboutUs</a>
                        </li>
                        <li>
                            <a href="#">FAQ's</a>
                        </li>
                        <li id="login" class="dropdown">
                            <a href="#" class="dropdown" data-toggle="dropdown">
                                <span class="glyphicon glyphicon-user"></span>
                                ${userName}
                                <b class="caret"></b>
                            </a>
                            <ul class="dropdown-menu">
                                <li>
                                    <a href="profile">Profile</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
#wrapper {
  padding-left: 250px;
  transition: all 0.4s ease 0s;
}
#sidebar-wrapper {
  /*margin-top: 50px;*/
  margin-left: -250px;
  left: 250px;
  width: 250px;
  background: #000;
  position: fixed;
  height: 100%;
  overflow-y: auto;
  z-index: 1000;
  transition: all 0.4s ease 0s;
}
#wrapper.active {
  padding-left: 0;
}
#wrapper.active #sidebar-wrapper {
  left: 0;
}
#page-content-wrapper {
  width: 100%;
  margin-top: 50px;
}
.sidebar-nav {
  position: absolute;
  top: 0;
  width: 250px;
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
    
    /*Menu-toggle*/
    $("#menu-toggle").click(function(e) {
        e.preventDefault();
        $("#wrapper").toggleClass("active");
    });
    /*Scroll Spy*/
    $('body').scrollspy({ target: '#spy', offset:80});
    /*Smooth link animation*/
    $('a[href*=#]:not([href=#])').click(function() {
        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') || location.hostname == this.hostname) {
            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
            if (target.length) {
                $('html,body').animate({
                    scrollTop: target.offset().top
                }, 1000);
                return false;
            }
        }
    });
    
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Sidebar navigation with Scrollspy"
Bootstrap 3.1.0 Snippet by nanthagopal

Related: See More

Questions / Comments:

"Sidebar navigation with Scrollspy" Bootstrap 3.1.0 Snippet by nanthagopal

Related: See More

Questions / Comments:

"Sidebar navigation with Scrollspy"
Bootstrap 3.1.0 Snippet by nanthagopal