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

<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"> </div> <!-- NAVBAR --> <div id="ca_sidenav" class="container-fluid clearfix scrollspy"> <ul id="ca_nav" class="nav" data-spy="affix"> <li><a id="ca_nav0" class="CA_navButton active" href="#ca_section0" onclick="navButtonClick(0);"><div class="CA_navHighlight"></div><span><B2>Section0</B2></span></a></li> <li><a id="ca_nav1" class="CA_navButton" href="#ca_section1" onclick="navButtonClick(1);"><div class="CA_navHighlight"></div><span><B2>Section1</B2></span></a></li> <li><a id="ca_nav2" class="CA_navButton" href="#ca_section2" onclick="navButtonClick(2);"><div class="CA_navHighlight"></div><span><B2>Section2</B2></span></a></li> <li><a id="ca_nav3" class="CA_navButton" href="#ca_section3" onclick="navButtonClick(3);"><div class="CA_navHighlight"></div><span><B2>Section3</B2></span></a></li> <li><a id="ca_nav4" class="CA_navButton" href="#ca_section4" onclick="navButtonClick(4);"><div class="CA_navHighlight"></div><span><B2>Section4</B2></span></a></li> <li><a id="ca_nav5" class="CA_navButton" href="#ca_section5" onclick="navButtonClick(5);"><div class="CA_navHighlight"></div><span><B2>Section5</B2></span></a></li> </ul> </div> <div class="container-fluid" id="ca_page-wrapper"> <BR> <BR> <BR> <BR> <div id="ca_section0" class="container-fluid">Section0</div> <BR> <BR> <BR> <BR> <div id="ca_section1" class="container-fluid">Section1</div> <BR> <BR> <BR> <BR> <div id="ca_section2" class="container-fluid">Section2</div> <BR> <BR> <BR> <BR> <div id="ca_section3" class="container-fluid">Section3</div> <BR> <BR> <BR> <BR> <div id="ca_section4" class="container-fluid">Section4</div> <BR> <BR> <BR> <BR> <div id="ca_section5" class="container-fluid">Section5</div> <BR> <BR> <BR> <BR> </div> <script> // ALWAYS START AT TOP OF SCREEN window.addEventListener("load",function() { setTimeout(function(){ window.scrollTo(0, 1); }, 0); }); // INITIALIZE NAVBAR $(document).ready(function(){ initNavbar(); }); // NAVBAR SCROLLING $(function() { $('a[href*=\\#]').on('click', function(event) { event.preventDefault(); $('html,body').animate({scrollTop:$(this.hash).offset().top}, 300); }); }); $("#ca_page-wrapper").scrollspy({target: "#ca_sidenav"}); $('[data-spy="scroll"]').each(function () { var $spy = $(this).scrollspy('refresh'); }) // CHANGE NAVBAR ICONS ON SCROLL $(".nav").on("activate.bs.scrollspy", function() { var active = $(".nav li.active").index(); if (active != NowActive) { // turn off the old button $("#" + NavLinks[ NowActive ] ).css("background-image", "url('http://nickel-dime.com/OPENSRC/IMG/" + NavImgs[ NowActive ] + "-off.png')"); turnOffHighlight( NowActive ); $("#" + NavLinks[ NowActive ] ).animate({zoom: '98%'}, 100); // turn on the new button $("#" + NavLinks[ active ] ).css("background-image", "url('http://nickel-dime.com/OPENSRC/IMG/" + NavImgs[ active ] + "-on.png')"); turnOnHighlight( active ); $("#" + NavLinks[ active ] ).animate({zoom: '103%'}, 100); NowActive = active; } }) </script> </body>
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; font-weight:200; color:white; word-spacing: .001ex; letter-spacing: .001ex; text-decoration: none; } #ca_page-wrapper { position: relative; margin:0; padding:0; width:100%; height: 100%; overflow-x:hidden; overflow-y:hidden; background-color:gray; } #ca_section0 { position:relative; display:block; text-align:center; color:white; width:100%; height:500px; background-color:purple; } #ca_section1 { position:relative; display:block; text-align:center; color:white; width:100%; height:500px; background-color:red; } #ca_section2 { position:relative; display:block; text-align:center; color:white; width:100%; height:500px; background-color:green; } #ca_section3 { position:relative; display:block; text-align:center; color:white; width:100%; height:500px; background-color:orange; } #ca_section4 { position:relative; display:block; text-align:center; color:white; width:100%; height:500px; background-color:blue; } #ca_section5 { position:relative; display:block; text-align:center; color:white; width:100%; height:500px; background-color:pink; } .nav { display:block; background:transparent; z-index:100; width:50px !important; margin: 0px; } .nav a { color: white; } .nav li a:active, .nav li a:hover, .nav li a:focus { background-color:transparent !important; } #ca_sidenav { position: fixed; z-index:100; overflow:hidden; display:block; width: 50px; height: 120vh !important; top:0px; left:0px; padding-top:40px; border-radius:0px; background-color:rgba(0,0,0,0.5); } #ca_sidenav.CA_slideNavLeft { left:-49px; transition: left 0.5s ease-in-out; -moz-transition: left 0.5s ease-in-out; -webkit-transition: left 0.5s ease-in-out; -o-transition: left 0.5s ease-in-out; } #ca_sidenav.CA_slideNavRight { left:0px; transition: left 0.5s ease-in-out; -moz-transition: left 0.5s ease-in-out; -webkit-transition: left 0.5s ease-in-out; -o-transition: left 0.5s ease-in-out; } #ca_navToggle { opacity:1; position:fixed; left:5px; top:4px; z-index:200; width:40px; height:20px; } #ca_sidenav li { height:13vh; width:auto; margin-bottom:1vh; } #ca_sidenav li a { color: white; line-height: 100px; } .CA_navButton { background-repeat: no-repeat; background-position:top; content:""; left:-10px; top:0px; height:40px !important; width:40px !important; } .CA_navButton span { position:absolute; top:0px; left:-1px; width:50px; } .CA_navHighlight { z-index:100; display:block; width:5px; height:70px; margin-top:-15px; margin-left:30px; background:transparent; } #ca_nav0 { background-image: url("http://nickel-dime.com/OPENSRC/IMG/CA_nav0-on.png"); } #ca_nav1 { background-image: url("http://nickel-dime.com/OPENSRC/IMG/CA_nav1-off.png"); } #ca_nav2 { background-image: url("http://nickel-dime.com/OPENSRC/IMG/CA_nav2-off.png"); } #ca_nav3 { background-image: url("http://nickel-dime.com/OPENSRC/IMG/CA_nav3-off.png"); } #ca_nav4 { background-image: url("http://nickel-dime.com/OPENSRC/IMG/CA_nav4-off.png"); } #ca_nav5 { background-image: url("http://nickel-dime.com/OPENSRC/IMG/CA_nav5-off.png"); }
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"); NavVisible = false; } else { $("#ca_sidenav").removeClass("CA_hideNav"); $('#ca_navToggle img').attr("src","http://nickel-dime.com/OPENSRC/IMG/CA_nav-up.png"); NavVisible = true; } } // SLIDE THE NAVBAR LEFT / RIGHT function slideNavbar() { var sideNav = $("#ca_sidenav"); if (NavVisible) { sideNav.css("width", "55px"); sideNav.removeClass("CA_slideNavRight"); sideNav.addClass("CA_slideNavLeft"); $('#ca_navToggle img').attr("src","http://nickel-dime.com/OPENSRC/IMG/CA_nav-down.png"); $(".CA_navHighlight").show(600); NavVisible = false; } else { sideNav.css("width", "50px"); sideNav.removeClass("CA_slideNavLeft"); sideNav.addClass("CA_slideNavRight"); $('#ca_navToggle img').attr("src","http://nickel-dime.com/OPENSRC/IMG/CA_nav-up.png"); $(".CA_navHighlight").hide(0); NavVisible = true; } } // CHANGE NAVBAR ICONS ON CLICK function navButtonClick( nbc ) { ClickTarget = nbc; $("#" + NavLinks[ ClickTarget ] ).animate({zoom: '98%'}, 100); $("#" + NavLinks[ NowActive ] ).animate({zoom: '103%'}, 100); } function turnOffHighlight( index ) { var highlight = $("#" + NavLinks[ index ] + " .CA_navHighlight" ); highlight.css("background", "transparent"); highlight.css("margin-left", "31px"); } function turnOnHighlight( index ) { highlight = $("#" + NavLinks[ index ] + " .CA_navHighlight" ); highlight.css("background-color", "lime"); highlight.css("margin-left", "29px"); // corrects for the zoom }

Questions / Comments:

Related: See More