全屏抽屉菜单
全屏抽屉菜单：点汉堡按钮，菜单从右侧（或左侧）滑出铺满全屏，背景变暗且点击 Mask 关闭。结构：遮罩层（fixed + rgba 黑）+ 面板（fixed + transform 移入），打开时 body 加 overflow:hidden 锁滚动。
关闭后记得解除 overflow 锁定；进出场动画用 transform + opacity 过渡，别用 left/top（触发重排）。
- 面板 fixed 定位，transform: translateX(100%) 移出场外
- Mask 点击关闭；Esc 键也能关（keydown 监听）
- 打开时 body overflow:hidden 锁背景滚动，关闭时还原
HTML
<style> #drawerBtn { padding: 10px 24px; border: none; border-radius: 8px; background: #d2a8ff; color: #fff; cursor: pointer; } #drawerMask { position: fixed; inset: 0; background: rgba(0,0,0,.5); opacity: 0; visibility: hidden; transition: .3s ease; } #drawerMask.show { opacity: 1; visibility: visible; } #drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(320px, 80vw); background: #fff; padding: 20px; box-shadow: -8px 0 30px rgba(0,0,0,.2); transform: translateX(105%); transition: transform .35s cubic-bezier(.4,0,.2,1); } #drawerMask.show #drawer { transform: translateX(0); } #drawer a { display: block; padding: 12px; border-radius: 8px; color: #333; text-decoration: none; } #drawer a:hover { background: #f0e6ff; } #drawer .close { float: right; border: none; background: none; font-size: 20px; cursor: pointer; color: #999; } </style> <button id="drawerBtn">☰ 打开菜单</button> <div id="drawerMask"> <div id="drawer"> <button class="close">✕</button> <a href="#">首页</a><a href="#">产品</a><a href="#">关于</a> </div> </div> <script> var mask = document.getElementById('drawerMask'); function open() { mask.classList.add('show'); document.body.style.overflow = 'hidden'; } function close() { mask.classList.remove('show'); document.body.style.overflow = ''; } document.getElementById('drawerBtn').addEventListener('click', open); mask.querySelector('.close').addEventListener('click', close); mask.addEventListener('click', function (e) { if (e.target === mask) close(); }); document.addEventListener('keydown', function (e) { if (e.key === 'Escape') close(); }); </script>
本节要点抽屉菜单 = Mask + 面板 translateX 移入；打开锁 body 滚动，Esc/Mask 关闭。
