Menu Icon

Menu Icon

Copy to clipboard
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>