Trang chủ
Burger Menu Component
Save
Settings
Sign Up
Log In
Save
Settings
HTML
Copy
<button class="btn-m" aria-label="Menu"> <span></span> <span></span> <span></span> </button>
CSS
Copy
.btn-m { display: flex; flex-direction: column; justify-content: space-between; height: 2.6rem; width: 3.2rem; cursor: pointer; position: relative; z-index:2; } .btn-m span { display: block; height: 0.4rem; width: 100%; border-radius: 1rem; background:#0e2431; transition: 0.4s; } .btn-m span:nth-child(1) { transform-origin: 0 0; } .btn-m span:nth-child(2) { transition: transform 0.2s; } .btn-m span:nth-child(3) { transform-origin: 0 100%; } .exp .btn-m span:nth-child(1) { transform: rotate(45deg); } .exp .btn-m span:nth-child(2) { transform: scaleY(0); } .exp .btn-m span:nth-child(3) { transform: rotate(-45deg); }
JS
Copy
document.querySelector(".btn-m").onclick = () => document.documentElement.classList.toggle("exp");