Fixed Navigation Transition

Scrolling Transition

Fixed headers are a must for long pages and menus that need to be seen all the time. The transition between an inline menu and a fixed menu is an added effect that really makes your navigation stand out. I have made two different transition effects: A flip effect and an arrow ribbon effect.

note: This uses transition and transform CSS3 effects and may not be available in all browsers.

Fixed Navigation Structure

This effect uses 2 instances of the menu. One that will stay inline with the page, and one that will animate in (the fixed navigation). The Icon will do a flip effect.

<div class="section">
  <nav>
    <ul class="menu">
      <li><a href="index.html" class="active">flip</a></li>
      <li><a href="arrows.html">arrows</a></li>
      <li><a href="#">home</a></li>
      <li><a href="#">products</a></li>      
    </ul>
    <ul class="hidden menu">
      <li><a href="index.html" class="active">flip</a></li>
      <li><a href="arrows.html">arrows</a></li>
      <li><a href="#">home</a></li>
      <li><a href="#">products</a></li>      
    </ul>
  </nav>

  <div class="icon rotate">
    <a class="back" href="#"><img src="http://www.webdesigncrowd.com/wp-content/themes/tanzaku/images/logo.png"></a>
    <div class="front">
      <img src="http://www.webdesigncrowd.com/wp-content/themes/tanzaku/images/logo.png">
    </div>
  </div>
</div>

jQuery

This simple jQuery is what basically toggles from inline to fixed navigation. You can change the value 1 to your preferred number of pixels when the toggle happens. (currently after you scroll more than 1 pixel the transition happens).

$(window).scroll(function () {
  var scrollTop = $(window).scrollTop();
  console.log(scrollTop);
  if (scrollTop > 1) {
    $(".icon").addClass("fixed");
    $("ul.menu").addClass("fixed");
  }
  else {
    $(".icon").removeClass("fixed");
    $("ul.menu").removeClass("fixed");
  }
});

Flip CSS

This is the css for the icon flipping animation. It uses the transform RotateX property. There is a front and back to the icon where you can have different things if you want to flip to a different style of logo for example.

.icon,
.front,
.icon a {
  -webkit-transition: .5s ease-out;
  transition: .5s ease-out;
  
  width: 150px;
  height: 150px;
}

.icon {
  position: fixed;
  margin: 0 auto;
  left: 0;
  right: 0;
  top: 100px;
  z-index: 11;
}
  .icon.fixed {
    width: 100px;
    height: 100px;
    position: fixed;
    top: 10px;
  }

  .icon a {
    position: relative;
    margin: 0;
    display: block;
    width: 150px;
    height: 150px;
    background-color: #9bd668;
    font-weight: bold;
    line-height: 150px;
    
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;    
  }
    .icon img {
      -webkit-transition: .5s ease-out;
      transition: .5s ease-out;
      padding: 0;
      margin-top: 33%;
      width: 100%;
    }

  .front {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #8ad648;

    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;    
  }

  .icon a.back {
    background-color: #444;
    transform:rotateX(-180deg);
    -ms-transform:rotateX(-180deg); 
    -webkit-transform:rotateX(-180deg); 
  }
   .icon.fixed a.back {
      line-height: 100px;
      width: 100px;
      height: 100px;
      transform:rotateX(0);
      -ms-transform:rotateX(0); 
      -webkit-transform:rotateX(0); 
      z-index: 1;
    }
   
  /* Rotate */
  .icon.rotate.fixed .front {
    transform:rotateX(-180deg);
    -ms-transform:rotateX(-180deg); 
    -webkit-transform:rotateX(-180deg); 
    left: 0;
  }

Arrow CSS

The arrow banners are created with the transform skew property. The rest is done with basic CSS3 transitions.

  /* Arrow Menus */
  ul.menu.hidden.arrow-left,
  ul.menu.hidden.arrow-right {
    width: 40%;
    top: 25px;
    box-shadow: none;
    background-color: transparent;
    padding: 0 5%;

      transition: .5s ease-out;
      -webkit-transition: .5s east-out;

  }
    ul.menu.hidden.arrow-left { left: -60%; }
      ul.menu.hidden.arrow-left.fixed { left: 0; }
      ul.menu.hidden.arrow-left li { float: right; }
    ul.menu.hidden.arrow-right { 
      left: 110%;
    }
      ul.menu.hidden.arrow-right.fixed { left: 50%; }

  .arrow {
    display: block;
    position: absolute;
    height: 50%;
    background-color: #444;
    z-index: -1;
  }
  .arrow-left .arrow {
    left: 30px;
    right: 0;
  }
    .arrow-left .arrow.top {
      -ms-transform: skew(30deg,0); /* IE 9 */
      -webkit-transform: skew(30deg,0); /* Chrome, Safari, Opera */
      transform: skew(30deg,0);
    }
    .arrow-left .arrow.bottom {
      top: 50%;
      -ms-transform: skew(-30deg,0); /* IE 9 */
      -webkit-transform: skew(-30deg,0); /* Chrome, Safari, Opera */
      transform: skew(-30deg,0);
    }
  .arrow-right .arrow {
    right: 30px;
    left: 0;
  }
    .arrow-right .arrow.top {
      -ms-transform: skew(-30deg,0); /* IE 9 */
      -webkit-transform: skew(-30deg,0); /* Chrome, Safari, Opera */
      transform: skew(-30deg,0);
    }
    .arrow-right .arrow.bottom {
      top: 50%;
      -ms-transform: skew(30deg,0); /* IE 9 */
      -webkit-transform: skew(30deg,0); /* Chrome, Safari, Opera */
      transform: skew(30deg,0);
    }

The post Fixed Navigation Transition appeared first on webdesigncrowd.com.