Mobile Hamburger Menu

<nav class="hm"><b>Brand</b><button class="hm-btn" id="hmBtn"><span></span><span></span><span></span></button><div class="hm-menu" id="hmMenu"><a>Home</a><a>Products</a><a>About</a><a>Contact</a></div></nav>

body{background:#f6f7fa}
.hm{position:relative;display:flex;align-items:center;justify-content:space-between;width:320px;padding:16px 20px;background:#1a1f36;border-radius:14px;font-family:system-ui,sans-serif}
.hm b{color:#fff;font-size:18px}
.hm-btn{width:40px;height:40px;border:0;background:0;cursor:pointer;display:grid;place-items:center;gap:5px}
.hm-btn span{display:block;width:24px;height:2.5px;background:#fff;border-radius:2px;transition:.3s}
.hm-btn.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.hm-btn.open span:nth-child(2){opacity:0}
.hm-btn.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
.hm-menu{position:absolute;top:100%;left:0;right:0;margin-top:8px;background:#1a1f36;border-radius:14px;padding:8px;display:flex;flex-direction:column;opacity:0;transform:translateY(-10px);pointer-events:none;transition:.25s}
.hm-menu.open{opacity:1;transform:none;pointer-events:auto}
.hm-menu a{color:#c8d3e8;padding:12px 14px;border-radius:9px;font-size:14px;font-weight:600;cursor:pointer}
.hm-menu a:hover{background:#2a3450;color:#fff}

var b=document.getElementById('hmBtn'),m=document.getElementById('hmMenu');
b.onclick=function(){b.classList.toggle('open');m.classList.toggle('open')};