A Pen by Sam Renault.

Animated-Burger-menu-CSS3.markdown

Animated Burger menu CSS3

Animated burger/menu icon on hover and on click with CSS3

A Pen by Sam Renault on CodePen.

License.

index.html

<a href="#"><i>Menu</i></a>

script.js

$('a').click(function() {
   $(this).toggleClass('active');
});

style.css

a {
  display: inline-block;
  width:18px;
  height:18px;
  cursor: pointer;
  text-decoration: none;
}
a i {
  position: relative;
  display: inline-block;
  width: 18px;
  height: 3px;
  color:#252525;
  font:bold 14px/.4 Helvetica;
  text-transform: uppercase;
  text-indent:-55px;
  background: #252525;
  transition:all .2s ease-out;
}
a i::before, a i::after {
  content:'';
  width: 18px;
  height: 3px;
  background: #252525;
  position: absolute;
  left:0;
  transition:all .2s ease-out;
}
a i::before {
  top: -7px;
}
a i::after {
  bottom: -7px;
}
a:hover i::before {
  top: -10px;
}
a:hover i::after {
  bottom: -10px;
}
a.active i {
	background: #fff;
}
a.active i::before {
  top:0;
  -webkit-transform: rotateZ(45deg);
     -moz-transform: rotateZ(45deg);
      -ms-transform: rotateZ(45deg);
       -o-transform: rotateZ(45deg);
          transform: rotateZ(45deg);
}
a.active i::after {
  bottom:0;
  -webkit-transform: rotateZ(-45deg);
     -moz-transform: rotateZ(-45deg);
      -ms-transform: rotateZ(-45deg);
       -o-transform: rotateZ(-45deg);
          transform: rotateZ(-45deg);
}





/* Button placement */
a {
  position: absolute;
  left:50%;
  margin-left:-9px;
  top:50%;
  margin-top:-9px;
}