A Pen by Danny.

Animated-Navigation-Style.markdown

Animated Navigation Style

Alternative Navigation Style using CSS3 animations and transitions.

A Pen by Danny on CodePen.

License.

index.html

<header>
<span id="menu-collapse">
  <span class="menu-icon"></span>
  <span class="menu-icon"></span>
  <span class="menu-icon"></span>
</span>
<nav role="navigation">
  <ul>
    <li>
      menu 1
    </li>
    <li>
      menu 2
    </li>
    <li>
      menu 3
    </li>
    <li>
      menu 4      
    </li>
  </ul>    
</nav>
</header>

script.js

/* bit of js needed to allow second animation */
$('#menu-collapse').click(function(e){
  $(this).toggleClass('active');
  /* add any additional functionality ie. show navigation links */
  $('nav').fadeToggle();
});

var center = Math.floor($('header').width()/2), distance, difference, link, elem = $('#menu-collapse').width();

/* additional mouse tracking for menu selection */
$('nav > ul > li').mouseenter(function(e){
  if($('#menu-collapse').hasClass('active')){
    link = $(this).offset();
    difference =  Math.floor(($(this).width()-elem)/2);
    distance = link.left-center+difference;
    $('#menu-collapse').css('left', distance);
  }
});

/* save state on click */
$('nav > ul > li').click(function(e){
  $('#menu-collapse').removeClass('active');
  $('nav').fadeOut();
});

style.css

/* Note Additional Border Styles At end of file
 * add media query as no hover on mobile so animation would be jumbled */
@media screen and (min-width: 700px){
/* Animation Controls */
/* inital animation also allows for smooth off-hover */
@keyframes start_a
{
from {transform: rotate(45deg);-ms-transform: rotate(45deg);left:11px;top: 13px;}
to {transform: rotate(0deg);-ms-transform: rotate(0deg);left:5px;top: 25px; }
}

@-webkit-keyframes start_a /* Safari and Chrome */
{
from {-webkit-transform: rotate(45deg);left:11px;top: 13px;}
to {-webkit-transform: rotate(0deg);left:5px;top: 25px;}
}

@keyframes start_b
{
from {transform: rotate(-45deg);-ms-transform: rotate(-45deg);left: 24px;top: 13px;}
to {transform: rotate(0deg);-ms-transform: rotate(0deg);left: 30px;top: 25px; }
}

@-webkit-keyframes start_b
{
from {-webkit-transform: rotate(-45deg);left: 24px;top: 13px;}
to {-webkit-transform: rotate(0deg);left: 30px;top: 25px; }
}

@keyframes start_c
{
from {transform: rotate(0deg);-ms-transform: rotate(0deg);}
to {transform: rotate(90deg);-ms-transform: rotate(90deg);}
}

@-webkit-keyframes start_c /* Safari and Chrome */
{
from  {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(90deg);}
}

@keyframes flip_a
{
from {transform: rotate(0deg);-ms-transform: rotate(0deg);left: 30px;top: 25px; }
to {transform: rotate(-45deg);-ms-transform: rotate(-45deg);left: 24px;top: 13px;}
}

@-webkit-keyframes flip_a /* Safari and Chrome */
{
from {-webkit-transform: rotate(0deg);left: 30px;top: 25px;}
to {-webkit-transform: rotate(-45deg);left: 24px;top: 13px;}
}

@keyframes flip_b
{
from {transform: rotate(0deg);-ms-transform: rotate(0deg);left:5px;top: 25px; }
to {transform: rotate(45deg);-ms-transform: rotate(45deg);left:11px;top: 13px;}
}

@-webkit-keyframes flip_b /* Safari and Chrome */
{
from {-webkit-transform: rotate(0deg);left: 5px;top: 25px;}
to {-webkit-transform: rotate(45deg);left: 11px;top: 13px;}
}

@keyframes flip_c
{
from {transform: rotate(90deg);-ms-transform: rotate(90deg);}
to {transform: rotate(0deg);-ms-transform: rotate(0deg);}
}

@-webkit-keyframes flip_c /* Safari and Chrome */
{
from {-webkit-transform: rotate(90deg);}
to {-webkit-transform: rotate(0deg);}
}

@keyframes drop_a
{
from {top:13px;}
to {top:98px;}
}

@-webkit-keyframes drop_a/* Safari and Chrome */
{
from {top:13px;}
to {top:98px;}
}

@keyframes drop_c
{
from {width:25px;left:9px;border-left-width: 8px;border-right-width: 8px;top:5px;}
to {width:0;left:26px;border-left-width: 4px;border-right-width: 4px;top:60px;}
}

@-webkit-keyframes drop_c /* Safari and Chrome */
{
from {width:25px;left:9px;border-left-width: 8px;border-right-width: 8px;top:5px;}
to {width:0;left:26px;border-left-width: 4px;border-right-width: 4px;top:60px;}
}

#menu-collapse {
  transition: left 2s,  margin-bottom 2s;
  -webkit-transition: left 2s,  margin-bottom 2s;
}

header nav > ul {
  transition: left 2s;
  -webkit-transition: left 2s;
}

}

/* base and initial styles */

header {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  padding: 25px;
  background: #222;
  color: #EEE;
  -webkit-backface-visibility: hidden;
}

span {
  display: block;
  margin: 0;
}

#menu-collapse {
  width: 50px;
  height: 50px;
  padding: 5px;
  margin: 0 auto;
  position: relative;
  cursor: pointer;
}

.menu-icon {
  position: absolute;
}

.menu-icon:first-child {
  animation: start_b 1s;
  -webkit-animation: start_b 1s;
  width: 25px;
  top: 25px;
  left: 30px;
  height: 8px;
  background-color: #CCC;
}

.menu-icon:nth-child(2){
  animation: start_c 1s;
  -webkit-animation: start_c 1s;
  width: 26px;
  top: 5px;
  left: 9px;
  height: 50px;
  border-left: 8px solid #CCC;
  border-right: 8px solid #CCC;
  transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
}

.menu-icon:last-child {
  animation: start_a 1s;
  -webkit-animation: start_a 1s;
  width: 25px;
  top: 25px;
  left: 5px;
  height: 8px;
  background-color: #CCC;
}

/* hover state styles */

#menu-collapse:hover .menu-icon:first-child {
  animation: flip_a 1s;
  -webkit-animation: flip_a 1s;
  transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  left: 24px;
  top: 13px;
}

#menu-collapse:hover .menu-icon:last-child {
  animation: flip_b 1s;
  -webkit-animation: flip_b 1s;
  transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  left:11px;
  top: 13px;
}

#menu-collapse:hover .menu-icon:nth-child(2){
  animation: flip_c 1s;
  -webkit-animation: flip_c 1s;
  transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  width: 25px;
}

/* active state styles */

#menu-collapse.active {
  margin-bottom: 60px;
}

#menu-collapse.active .menu-icon:first-child {
  animation: drop_a 1s;
  -webkit-animation: drop_a 1s;
  transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  left: 24px;
  top: 98px;
}

#menu-collapse.active .menu-icon:last-child {
  animation: drop_a 1s;
  -webkit-animation: drop_a 1s;
  transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  left:11px;
  top: 98px;
}

#menu-collapse.active .menu-icon:nth-child(2){
  animation: drop_c 1s;
  -webkit-animation: drop_c 1s;
  transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  width: 0px;
  left: 26px;
  top: 60px;
  border-left-width: 4px;
  border-right-width: 4px;
}

header nav {
  position: relative;
  top: 10px;
  display: none;
  font-family: sans-serif;
}

header nav > ul {
  width: 400px;
  margin-left: 0;
  padding-left: 0;
  margin: 0 auto;
  position: relative;
}

header nav > ul > li {
  animation: show_menu 1s;
  -webkit-animation: show_menu 1s;
  display: inline-block;
  width: 90px;
  height: 30px;
  margin-left: 6px;
  border-bottom: 6px solid #CCC;
  text-align: center;
  cursor: pointer;
}

/* Style Options */

/* bevel
#menu-collapse {
  border-left: 25px solid #CCC;
  border-right: 25px solid #CCC;
  border-bottom: 5px solid #888;
  border-top: 5px solid #FFF;
} */

/* thin outline
#menu-collapse {
  border: 2px solid #CCC;
} */

/* thick outline
#menu-collapse {
  border: 25px solid #CCC;
} */

/* open topped 
#menu-collapse {
  border-left: 25px solid #CCC;
  border-right: 25px solid #CCC;
} */

/* no floor */
#menu-collapse {
  border-top: 25px solid #CCC;
  border-right: 25px solid #CCC;
  border-left: 25px solid #CCC;
}