移动端抽屉菜单需用语义化HTML列表（）搭建结构，配合CSS（transform+fixed+transition）实现隐藏滑入，再通过JS控制开关、焦点及ARIA属性以保障可访问性。
移动端抽屉菜单（Drawer Menu）本质是“隐藏+滑出”的导航列表，HTML 列表标签（<ul><li></ul>）负责结构，但单靠它们无法实现抽屉效果——需要配合 CSS 控制显示/隐藏和动画，再用 JavaScript 触发开关。下面分三步讲清楚怎么用标准列表做可用、可访问、适配手机的抽屉菜单。
用语义化 HTML 列表搭建菜单结构
抽屉菜单的导航项必须用 <nav></nav> 包裹，内部用无序列表 <ul></ul> + 列表项 <li>，这是语义正确、屏幕阅读器友好的写法。每个链接用 <a></a>，避免用 <div> 或 <code><span></span> 冒充可点击元素。
示例结构：
<nav id="drawer">
<ul>
<li><a href="/home">首页</a></li>
<li><a href="/about">关于我们</a></li>
<li><a href="/contact">联系我们</a></li>
</ul>
</nav>
用 CSS 实现隐藏、滑入与响应式布局
抽屉默认要完全隐藏（不占空间），点击后从左侧/右侧滑入。关键点：用 transform: translateX() 比 left 更流畅；用 position: fixed 脱离文档流；设置合适的宽度（比如 80vw）和背景遮罩。
立即学习“前端免费学习笔记（深入）”；
- 给
#drawer设position: fixed; top: 0; left: 0; width: 80vw; height: 100vh; background: #fff; - 初始状态加
transform: translateX(-100%);让它完全移出视口 - 添加过渡：
transition: transform 0.3s ease-in-out; - 定义一个类如
.open，激活时设transform: translateX(0); - 在小屏下禁用默认导航，只保留抽屉触发按钮（常用汉堡图标）
用轻量 JS 控制开关逻辑与可访问性
点击按钮切换 .open 类即可控制显隐。但要注意两点：一是绑定 click 事件后记得 event.preventDefault() 防止跳转；二是为无障碍支持，需管理焦点和 ARIA 属性。
- 按钮加上
aria-expanded="false"和aria-controls="drawer" - 抽屉容器加
role="dialog"或role="navigation"，并设aria-hidden="true"（关闭时） - 打开后自动把焦点移到第一个链接：
drawer.querySelector('a').focus() - 按
Esc键关闭：监听keydown，判断e.key === 'Escape'
补充：适配移动端触控与滚动
纯 CSS 抽屉容易在 iOS 上出现滚动穿透（背后页面跟着动）。解决办法：
- 抽屉打开时给
加overflow: hidden; - 抽屉内若内容超长，确保
#drawer ul有max-height: 100vh; overflow-y: auto; - 避免在抽屉上用
touch-action: none，否则可能影响滑动操作 - 测试真机：Safari 对
transform和fixed组合较敏感，必要时加-webkit-overflow-scrolling: touch;
