<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">
</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
}
