CSS & jQuery nav for ajax sites.markdown

CSS & jQuery nav for ajax sites

Floating navigation for pages with ajax content

A Pen by BjurhagerStudios on CodePen.

License.

index.html

<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>

script.js

$(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);
  });

});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

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;
}

styles

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