View CSS
View HTML
/* Resource - https://codepen.io/banik/pen/BVrNXP */
#menu-icon-x {
margin: 1em;
width: 40px;
cursor: pointer;
}
#menu-icon-x:after,
#menu-icon-x:before,
#menu-icon-x div {
background-color: #000;
border-radius: 3px;
content: '';
display: block;
height: 5px;
margin: 7px 0;
transition: all .2s ease-in-out;
}
.click:before {
transform: translateY(12px) rotate(135deg);
}
.click:after {
transform: translateY(-12px) rotate(-135deg);
}
.click div {
transform: scale(0);
}
<div id="menu-icon-x">
<div></div>
</div>
<script>
document.getElementById("menu-icon-x").onclick = function() {myFunction()};
function myFunction() {
var el = document.getElementById("menu-icon-x");
if(el.classList.contains("click")){
el.classList.remove("click");
} else {
el.classList.add("click");
}
}
</script>