Simple CSS Menu Transition

index.html

<h1>Pure CSS3 menu button</h1>

<div class="menu-box">
  <input type="checkbox" id="menu" />
  <label for="menu" class="menu-text">
  </label>
</div>
<p>Click the menu button to see the effect.</p>
<p>I created this after reading - <a href="http://exisweb.net/menu-eats-hamburger" target="_blank" >Hamburger vs Menu: The Final AB Test</a></p>

Simple-CSS-Menu-Transition.markdown

Simple CSS Menu Transition

Pure CSS3 menu button effect.

A Pen by Nathan Schmidt on CodePen.

License.

style.scss

@import "compass/css3";
h1{
  text-align: center;
}
p{
  text-align: center;
}
a{
  color: 147ea5;
  text-decoration: none;
}
.menu-box{
  height:15px;
  width:40px;
  margin:50px auto;
  border: 2px solid #147ea5;
  padding: 10px;
   position:relative;
  overflow: hidden;
}
.menu-box input[type=checkbox] {
  display:none;
}
.menu-box label {
  cursor:pointer;
  height:100%;
  width:100%;
  position:absolute;
  z-index:99;
  top:10px;
  left:0;
}
.menu-box input ~ .menu-text:before  {
  height: 100%;
  width: 100%;
  text-align: center;
  font-size: 0.9em;
  content: "MENU";
  display: block;
  @include transition(all, 0.2s, ease-in-out);
}
.menu-box input[type=checkbox]:checked ~ .menu-text:before {
  @include  transform(translate(0px, -36px) scale(1, 0.2));
  @include transition(all, 0.2s, ease-in-out);
}
.menu-box input ~ .menu-text:after  {
  height: 100%;
  width: 100%;
  text-align: center;
  font-size: 0.9em;
  content: "CLOSE";
  display: block;
  @include  transform(translate(0px, 0px) scale(1, 0.2));
  @include transition(all, 0.2s, ease-in-out);
}
.menu-box input[type=checkbox]:checked ~ .menu-text:after {
  @include  transform(translate(0px, -36px) );
  @include transition(all, 0.2s, ease-in-out);
}