Hi guys,
So many times people search for how to create animated burger icon used for menu, that changes to cross on click.
Here I have written code for that using html, css and a very little javascript. where the 3 horizontal lines gets converted into cross using css animation.
Inactive state menu:

Active State Menu:

Demo of this is given in this link.
http://sfiddle.net/raghvendra1501/uedoc2m8/1/

HTML Used:

<a id="nav-burger" href="javascript:void(0)">
    <span class= "span1"></span>
    <span class= "span2"></span>
    <span class= "span3"></span>
</a>

CSS Used,

#nav-burger .span2, #nav-burger .span1, #nav-burger .span3 {
    cursor: pointer;
    border-radius: 1px;
    height: 3px;
    top:12px;
    width: 24px;
    background: #000000;
    position: absolute;
    display: block;
    content: '';
}

#nav-burger .span1 {
    top: 0px;
}

#nav-burger .span2 {
    top: 6px;
}
#nav-burger .span3 {
    bottom: -30px; 
}

#nav-burger .span2, #nav-burger .span1, #nav-burger .span3             {
    transition: all 500ms ease-in-out;
}
#nav-burger.active .span2 {
    height:0px;
}

#nav-burger.active .span1, #nav-burger.active .span3 {
    top: 6px;
}
#nav-burger.active .span1 {
    transform: rotate(45deg);
}
#nav-burger.active .span3 {
    transform: rotate(-45deg);
}

#nav-burger {
    position: fixed;
    right: 70px;
    top: 40px;
    z-index: 100;   
    height: 35px;
    width: 35px;
}

Javascript Used

document.querySelector( "#nav-burger" ).addEventListener( "click", function() {        
   this.classList.toggle( "active" );
   if($("#nav-burger").hasClass("active")){        
       //Your code for opening menu etc
   }else {
      //Your code on closing of this icon    
   }
});