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 ---------->
<div id="wrapper">
        <!-- Sidebar -->
        <div id="sidebar-wrapper">
            <nav id="spy">
                <ul class="sidebar-nav nav">
                    <li class="sidebar-brand">
                        <a href="#home"><span class="fa fa-home solo">Home</span></a>
                    </li>
                    <li>
                        <a href="#anch1" data-scroll>
                            <span class="fa fa-anchor solo">Anchor 1</span>
                        </a>
                    </li>
                    <li>
                        <a href="#anch2" data-scroll>
                            <span class="fa fa-anchor solo">Anchor 2</span>
                        </a>
                    </li>
                                <li> <a data-toggle="collapse" data-target="#menu_sports" >Sports <span class="glyphicon glyphicon-plus color-white"></span> </a>
        <div id="menu_sports" class="collapse" >
       <ul class="list-unstyled">
                  <li><a  href="http://webdevgf.no-ip.org/index.php?p=3400" title="Objectif">Objectif</a> </li>
                  <li><a  href="http://webdevgf.no-ip.org/index.php?p=3401" title="Testing">Testing</a> </li>
                  <li><a  href="http://webdevgf.no-ip.org/index.php?p=3402" title="Séance">Séance</a> </li>
                </ul>
     </div>
   </li>
                    <li>
                        <a href="#anch3" data-scroll>
                            <span class="fa fa-anchor solo">Anchor 3</span>
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-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%;
}
.sidebar-nav {
  position: absolute;
  top: 0;
  width: 250px;
  list-style: none;
  margin: 0;
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
    
    /*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 guillaume-furet

Related: See More

Questions / Comments:

"Sidebar navigation with Scrollspy" Bootstrap 3.1.0 Snippet by guillaume-furet

Related: See More

Questions / Comments:

"Sidebar navigation with Scrollspy"
Bootstrap 3.1.0 Snippet by guillaume-furet