<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');
	});
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js