侧边抽屉菜单通过原生JS控制class切换实现显示/隐藏，CSS用transform+transition实现平滑动画，支持按钮触发、遮罩关闭、链接跳转关闭、Esc键关闭及滚动禁用。
用 JavaScript 实现侧边抽屉菜单，核心是控制一个隐藏容器的显示/隐藏状态，并配合 CSS 过渡动画让展开收起更自然。不需要框架，原生 JS 就能轻松搞定。
HTML 结构：预留抽屉容器和触发按钮
抽屉一般用 <aside> 或 <div> 包裹内容，固定定位在页面一侧（如 left: -300px），初始不可见；按钮放在主页面中，比如左上角汉堡图标：
<button id="menuToggle">☰</button><br><aside id="drawer" class="drawer"><br> <nav><br> <a href="#">首页</a><br> <a href="#">关于</a><br> <a href="#">联系</a><br> </nav><br></aside>
CSS 样式：定义抽屉位置、宽度与过渡效果
关键点是用 transform: translateX() 替代直接改 left，性能更好；同时设置 transition 控制滑入滑出动画：
.drawer {<br> position: fixed;<br> top: 0;<br> left: 0;<br> width: 300px;<br> height: 100vh;<br> background: #fff;<br> box-shadow: 0 0 12px rgba(0,0,0,0.15);<br> transform: translateX(-300px);<br> transition: transform 0.3s ease;<br> z-index: 1000;<br>}<br><br>.drawer.open {<br> transform: translateX(0);<br>}
注意：不要用 display: none 切换，否则会中断 transition 动画；用 class 控制状态更可控。
立即学习“Java免费学习笔记（深入）”；
JavaScript 逻辑：绑定点击、切换类名、支持遮罩与关闭
监听按钮点击，给抽屉添加 open 类；再加个点击遮罩或菜单内链接后自动关闭的逻辑，体验更完整：
- 获取 DOM 元素：
const toggleBtn = document.getElementById('menuToggle');和const drawer = document.getElementById('drawer'); - 绑定点击事件：
toggleBtn.addEventListener('click', () => drawer.classList.toggle('open')); - 点击遮罩关闭（可选）：在
<body>后追加一个半透明<div class="overlay">，点击它时移除open类 - 菜单内链接点击后关闭：给所有
a加事件，e.preventDefault()可选，之后调用drawer.classList.remove('open')
增强体验的小细节
让交互更专业，可以补充这些：
- 按
Esc键关闭抽屉：document.addEventListener('keydown', e => e.key === 'Escape' && drawer.classList.remove('open')); - 抽屉打开时禁用 body 滚动：
document.body.style.overflow = drawer.classList.contains('open') ? 'hidden' : ''; - 移动端适配：用
max-width: 768px媒体查询确保只在小屏启用抽屉，桌面端显示为常驻导航
