burger menu to x

HTML

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

CSS

body { background: #3B3F45; }

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: #fff;
  transition:all .2s ease-out;
}

a i::before, a i::after {
  content:'';
  width: 18px;
  height: 3px;
  background: #fff;
  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: rgba(0,0,0,0); }

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;
    top: 50px;
    right: 50px; 
}

JavaScript

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