Bootstrap Snippet Bootstrap side-toggle tracking navbar using HTML CSS 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 ---------->
  <head>
   
    <!-- FONTS -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Khand" type="text/css">
    
     
    <!-- BOOTSTRAP -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">    
    
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        
  </head>
<BODY id="ca_body" data-spy="scroll" data-target="#ca_sidenav" data-offset="50">
    
    
    <!-- NAVBAR TOGGLE -->
    <div id="ca_navToggle" onclick="slideNavbar();">
        <img style="height:20px; width:40px;" src="http://nickel-dime.com/OPENSRC/IMG/CA_nav-up.png" alt="Cathair Apocalypse">
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
HTML, BODY {
  margin:0;
  padding:0;
  overflow-x:hidden;
} 
BODY {
  position:relative;
  
  width: 100%;
  height: 100%;
  
  background-color:black;
}
.clearfix {
  overflow: auto;
  zoom: 1;
}
B2 {
    
    font-family:"Khand", sans-serif;
    
    font-size:14px;
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
    var NavVisible = false;
    var NowActive = 0;
    var ClickTarget = 0;
    var NavLinks = [ 'ca_nav0', 'ca_nav1', 'ca_nav2', 'ca_nav3', 'ca_nav4', 'ca_nav5' ];
    var NavImgs = [ 'CA_nav0', 'CA_nav1', 'CA_nav2', 'CA_nav3', 'CA_nav4', 'CA_nav5' ];
    
    
    function initNavbar() {         
    
        NowActive = 0;
        ClickTarget = 0;
    
        $(".CA_navHighlight").hide();
        $('#ca_navToggle img').attr("src","http://nickel-dime.com/OPENSRC/IMG/CA_nav-up.png");
    
        // turn on first button
        $("#" + NavLinks[ NowActive ] ).css("background-image", "url(http://nickel-dime.com/OPENSRC/IMG/" + NavImgs[ NowActive ] + "-on.png)");
        $("#" + NavLinks[ NowActive ] + " .CA_navHighlight" ).css("background-color", "lime");
        
        NavVisible = true;
    }
            
    
    
    // SLIDE THE NAVBAR DOWN / UP
    function toggleNavbar() {
    
        if (NavVisible) {
    
            $("#ca_sidenav").addClass("CA_hideNav");
            $('#ca_navToggle img').attr("src","http://nickel-dime.com/OPENSRC/IMG/CA_nav-down.png");
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Bootstrap side-toggle tracking navbar"
Bootstrap 3.1.0 Snippet by The Nickel-Dime

Related: See More

Questions / Comments:

"Bootstrap side-toggle tracking navbar" Bootstrap 3.1.0 Snippet by The Nickel-Dime

Related: See More

Questions / Comments:

"Bootstrap side-toggle tracking navbar"
Bootstrap 3.1.0 Snippet by The Nickel-Dime