Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<nav id="main-nav">
<ul id="nav-holder">
<li class="nav-item" style="background-color: #5fb3f9;">
<a href="#">
<i class="fa fa-home"></i>
</a>
</li>
<li class="nav-item" style="background-color: #60ead3;">
<a href="#">
<i class="fa fa-heartbeat"></i>
</a>
</li>
<li class="nav-item" style="background-color: #fda660;">
<a href="#">
<i class="fa fa-codepen"></i>
</a>
</li>
<li class="nav-item" style="background-color: #fd7b87;">
<a href="#">
<i class="fa fa-gear"></i>
</a>
</li>
</ul>
<a href="www.bjurhagerstudios.com" class="cred">By BjurhagerStudios</a>
</nav>
<div id="header" class="animate hide">
<div id="h-inner" class="animate">
<h1>Page title</h1>
</div>
</div>
$(function() {
$('.nav-item').click(function() {
var navcol = $(this).css('backgroundColor');
$('#header').removeClass('show');
$('#header').addClass('hide');
$(this).hide(800);
$(this).addClass('active');
setTimeout(function() {
$('.active').prependTo('#nav-holder').show(800);
$(".nav-item").removeClass('active');
$('#header').removeClass('hide');
$('#header').addClass('show');
$('#header').css({
"background-color": navcol
});
}, 800);
});
});
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
html {
background-color: #f1f4f5;
font: 14px/28px 'Open Sans', sans-serif;
height: 100%;
width: 100%;
}
#header {
position: relative;
width: 100%;
display: block;
text-align: center;
z-index: -1;
height: 150px;
}
#h-inner {
width: 100%;
height: 100%;
color: #fff;
line-height: 150px;
font-size: 20px;
}
.show {
left: 0;
}
.hide {
left: -100%;
}
#main-nav {
float: left;
z-index: 2;
}
#nav-holder {
position: relative;
}
.nav-item {
width: 150px;
height: 150px;
background-color: orange;
display: block;
text-align: center;
line-height: 150px;
cursor: pointer;
}
.nav-item a:hover i {
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
.nav-item a {
text-decoration: none;
color: #fff;
width: 100%;
height: 100%;
display: block;
}
.nav-item i {
font-size: 30px;
}
.animate {
-webkit-transition: all .8s ease-in-out;
-moz-transition: all .8s ease-in-out;
-o-transition: all .8s ease-in-out;
transition: all .8s ease-in-out;
}
.cred {
color: #969696;
font-size: 7pt;
text-align: center;
margin-top: 20px;
text-decoration: none;
width: 100%;
display: block;
}
<link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" />
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.