<details>标签不能改造为侧边抽屉式菜单，因其仅支持垂直展开/收起，缺乏translateX动画、遮罩层、Esc关闭、焦点锁定等必需能力，强行改造会导致行为不可靠、无障碍失效及兼容性问题。
标签不能改造成侧边抽屉式菜单。
它原生只支持垂直方向的展开/收起，浏览器控制
open 状态切换，不提供 transform: translateX()、遮罩层、Esc 关闭、键盘焦点锁定等侧边栏必需能力。强行“改造”只会导致行为不可靠、无障碍失效、移动端点不中、Safari 下 open 属性偶尔失灵等问题。
下面说清楚几个关键点：
details[open] 无法触发侧向位移动画
你不能给 <details> 元素加 transition: transform 0.3s 并期望它滑入——浏览器在切换 open 状态时不会触发 transform 变化，也没有过渡钩子。所有“用 CSS 动画模拟侧边抽屉”的尝试，实际都是放弃 <details>，转而用 <div> + class 或 checkbox 控制状态。
嵌套 details 做二级菜单 ≠ 侧边栏
虽然 <details> 支持嵌套（如 FAQ 或设置面板），但它的层级缩进靠 padding-left，展开逻辑是独立的，无法实现“点击一级菜单，滑出整个侧边区域并覆盖主内容”的效果。常见错误包括：
- 把多个
<details>并列放在<nav>里，结果竖着堆成一列（display: block默认行为） - 想用
summary::before旋转图标来表示“侧边栏已展开”，但图标状态和真实侧边栏宽度不联动 - 点击遮罩层关闭功能完全缺失——
<details>只响应<summary>点击
真正可行的侧边抽屉方案只有两类
如果你需要点击按钮后从左侧滑入、带遮罩、支持 Esc 关闭、可键盘导航的侧边栏，必须用以下之一：
-
Checkbox Hack：用
<input type="checkbox" id="drawer">+<label for="drawer">+<div class="drawer">，配合:checked ~ .drawer { transform: translateX(0); } -
JS + class 切换：监听按钮 click，执行
drawer.classList.toggle('is-open')，CSS 定义.drawer.is-open { transform: translateX(0); }
两者都需手动处理 overflow-x: hidden、tabindex、aria-expanded、aria-controls 和点击遮罩关闭逻辑——这些是 <details> 天然不提供的。
立即学习“前端免费学习笔记（深入）”；
details 的合理定位：语义化折叠区块，不是菜单容器
它最适合用在侧边栏内部，作为可展开的子模块，比如：
<aside class="sidebar">
<details>
<summary>账户设置</summary>
<div><p>邮箱修改</p><p>密码重置</p></div>
</details>
<details>
<summary>通知偏好</summary>
<div><p>邮件提醒</p><p>站内信</p></div>
</details>
</aside>
这时候你才该关心 summary::marker 隐藏、details[open] 图标切换、触控热区 min-height: 44px 这些细节——而不是试图把它拉去当整个侧边栏。
<details> 不参与其中。
