No JS: CSS3 Animated Nav Menu

index.html

<header>
  <h1>CSS3 Animated Nav Menu</h1>
  <h2>
    <code>label</code> makes hidden checkbox <code>:checked</code><br>
    <code>:checked</code> checkbox reveals navigation
  </h2>
</header>
<div class='container'>
  <input id='menu-toggle' type='checkbox'>
  <label class='menu' for='menu-toggle' id='menu-icon'></label>
  <ul id='navigation'>
    <li><a href='#'>Earth</a></li>
    <li><a href='#'>Jupiter</a></li>
    <li><a href='#'>Mars</a></li>
  </ul>
</div>

No JS: CSS3 Animated Nav Menu.markdown

No JS: CSS3 Animated Nav Menu

Using a checkbox to toggle the menu.

A Pen by Jake Albaugh on CodePen.

License.

style.scss

@import url(http://fonts.googleapis.com/css?family=Roboto:300,100);
@import url(http://fonts.googleapis.com/css?family=Inconsolata);

$icon_d: 100px;
$icon_bg: #66ccff; $icon_c: white;
$icon_b_h: $icon_d / 12;
$menu_lh: $icon_d; $menu_i: 3; $menu_w: $icon_d * 4;
$timing: 200ms;

// hidden menu toggle
#menu-toggle {
  display: none;
  
  &:checked ~ #navigation {
    max-height: $menu_i * $menu_lh;
    transition-duration: $timing*2;
    transition-timing-function: ease-out;
    transition-delay: $timing;
  }
  
  &:checked ~ #menu-icon {
    background-color: desaturate($icon_bg, 100%);
    border-radius: 0;
    width: $menu_w;
    transition-delay: 0ms;
    
    &::after {
      transition-delay: 0ms;
      transform: rotate(45deg);
      box-shadow: 
        0px ($icon_b_h*4.75) 0px rgba(255,255,255,0),
        0px ($icon_b_h*4.75*-1) 0px rgba(255,255,255,0);
    }
    &::before {
      transition-delay: 0ms;
      opacity: 1;
      transform: rotate(-45deg);
    }
  }
}

// menu icon
#menu-icon {
  display: block;
  position: relative;
  margin: 0 auto;
  width: $icon_d; height: $icon_d;
  background: $icon_bg;
  border-radius: 50%;
  cursor: pointer;
  
  transition-property:
    background, border-radius, width, box-shadow;
  transition-duration: $timing;
  transition-timing-function: ease-out;
  transition-delay: $timing;
  
  &:hover {
    animation: icon-hover $timing*4 ease-in infinite;
  }
  
  &::before {
    content: '';
    opacity: 0;
    position: absolute;
    top: ($icon_d/2) - ($icon_b_h/2);
    left: 50%; 
    width: $icon_d*0.5; height: $icon_b_h;
    margin-left: $icon_d*-0.25;
    transform: rotate(0deg);
    background: $icon_c;
    transition-property: opacity, transform;
    transition-duration: $timing;
    transition-timing-function: ease-out;
    transition-delay: $timing;
  }
  
  &::after {
    content: '';
    position: absolute;
    top: ($icon_d/2) - ($icon_b_h/2);
    left: 50%; 
    width: $icon_d*0.5; height: $icon_b_h;
    margin-left: $icon_d*-0.25;
    background: $icon_c;
    box-shadow: 
      0px ($icon_b_h*1.75) 0px $icon_c,
      0px ($icon_b_h*-1.75) 0px $icon_c;
    transition-property: box-shadow, transform;
    transition-duration: $timing;
    transition-timing-function: ease-out;
    transition-delay: $timing;
  }
}
// navigation
#navigation {
  max-height: 0;
  overflow: hidden;
  width: $menu_w;
  
  margin: 0 auto;
  padding: 0;

  transition-property: max-height;
  transition-duration: $timing;
  transition-timing-function: ease-out;
  transition-delay: 0ms;
  
  li {
    list-style: none;
    font-size: $icon_d / 4;
    
    a {
      text-decoration: none;
      height: $menu_lh;
      line-height: $menu_lh;
      display: block;
      
      color: $icon_bg;
      background: $icon_c;

      transition-property: color background-color;
      transition-duration: 200ms;
      transition-timing-function: ease-out;
      
      &:hover {
        color: $icon_c;
        background: $icon_bg;
      }
    }
    
    &:last-child a {
      border-radius: 0;
    }
  }
}

@keyframes icon-hover {
  0% { 
    background-color: $icon_bg; 
  }
  50% {
    background-color: transparentize($icon_bg,0.1);
  }
  100% {
    background-color: $icon_bg; 
  }
}

.container {
  margin: 2em auto;
  width: 80%;
  text-align: center;
}

body {
  font-family: Roboto, sans-serif;
  font-weight: 300;
  background: #f0f0f0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

header {
  width: 100%;
  background: #222;
  box-sizing: border-box;
  padding: 2em 0;
}

h1, h2 {
  font-weight: 100;
  text-align: center;
  letter-spacing: 1px;
}
h1 {
  margin: 0;
  color: $icon_bg;
  font-size: 2.4em;
}
h2 {
  color: $icon_c;
}
code {
  font-family: Inconsolata;
}