• HTML
• CSS
• JS

HTML

<div class="menu-bar">
    <div class="mb-line-1"></div>
    <div class="mb-line-2"></div>
    <div class="mb-line-3"></div>
</div>

CSS

body{
    background:darkslateblue;
}
.menu-bar{
    width:2em;
    cursor:pointer;
    margin:2em;
}
.mb-line-1,.mb-line-2,.mb-line-3{
    width:100%;
    height:0.2em;
    background:white;
    border-radius:1px;
    transition:all 0.5s;
}
.mb-line-2{
    padding:0rem;
    margin:0.3em 0em;
}

/* animación */

.show .mb-line-1{
    transform:rotate(45deg) translate(5px,5px);
}
.show .mb-line-2{
    opacity:0;
}
.show .mb-line-3{
    transform:rotate(-45deg) translate(6px,-7px);
}

JS

$(function(){
    
    var elem = $(".menu-bar");
    
    elem.on("click",function(){
        elem.toggleClass("show");
    });
    
});