<div class="menu-toggle">
<div class="hamburger">
<span></span>
<span></span>
<span></span>
</div>
<div class="cross">
<span></span>
<span></span>
</div>
</div>
*{
padding:0;
margin:0;
box-sizing:border-box;
}
html{
height:100%;
}
body{
height:100%;
display:flex;
justify-content:center;
align-items:center;
}
.menu-toggle{
flex:0 0 auto;
width:40px;
height:40px;
border:1px solid rgb(15,15,15);
cursor:pointer;
position:relative;
}
.hamburger,.cross{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
.hamburger span{
display:block;
width:18px;
height:2px;
margin-bottom:3px;
overflow:hidden;
position:relative;
}
.hamburger span:last-child{
margin:0;
}
.hamburger span:before,.hamburger span:after{
content:"";
position:absolute;
width:100%;
height:100%;
background-color:rgb(15,15,15);
transform:translateX(-200%);
transition:transform ease 300ms;
}
.hamburger span:after{
transform:translateX(0);
}
.hamburger span:nth-child(2):before,.hamburger span:nth-child(2):after{
transition-delay:75ms;
}
.hamburger span:last-child:before,.hamburger span:last-child:after{
transition-delay:150ms;
}
.menu-toggle:hover .hamburger span:before{
transform:translateX(0);
}
.menu-toggle:hover .hamburger span:after{
transform:translateX(200%);
}
.menu-toggle.active .hamburger span:before{
transform:translateX(100%);
}
.menu-toggle.active .hamburger span:after{
transform:translateX(200%);
}
.cross span{
display:block;
width:18px;
height:2px;
background-color:rgb(15,15,15);
transform:translateY(50%) rotate(45deg) scaleX(0);
transition:transform ease 200ms;
}
.cross span:last-child{
transform:translateY(-50%) rotate(-45deg) scaleX(0);
}
.menu-toggle.active .cross span{
transition-delay:450ms;
transform:translateY(50%) rotate(45deg) scaleX(1);
}
.menu-toggle.active .cross span:last-child{
transform:translateY(-50%) rotate(-45deg) scaleX(1);
}
$(document).ready(function(){
$('.menu-toggle').on('click',function(){
$('.menu-toggle').toggleClass('active');
});
});
This Pen doesn't use any external CSS resources.