<div class="center">
<div class="menu">
<div class="line"></div>
</div>
</div>
.center {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.menu {
width: 40px;
cursor: pointer;
}
.menu .line,
.menu:before,
.menu:after {
height: 3px;
display: block;
background-color: black;
content: "";
margin: 9px 0;
transition: all 0.3s;
}
.menu.active:before {
transform: translateY(12px) rotate(225deg);
}
.menu.active .line {
transform: scale(1.5);
opacity: 0;
}
.menu.active:after {
transform: translateY(-12px) rotate(-225deg);
}
const menu = document.querySelector(".menu");
menu.addEventListener("click", () => {
menu.classList.toggle("active");
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.