details标签不适合做侧边栏菜单，因其仅支持summary点击展开、缺乏遮罩关闭/动画/键盘导航/无障碍语义；推荐用checkbox+label+CSS实现纯CSS开关式侧边栏，details仅宜作为侧边栏内折叠区块。

Details 标签本身不能直接构建侧边栏菜单，它适合做可折叠的摘要内容（如 FAQ、设置面板），但**不适用于全屏侧边栏导航**。真正适合移动端侧边栏的是语义化结构 + CSS（配合 checkbox 或 :target）实现的“纯 CSS 开关式菜单”。下面提供一个**完全不用 JavaScript、兼容现代移动端浏览器、基于 HTML5 语义标签 + CSS 的侧边栏方案**，并说明为何 details 不合适、以及如何合理使用它作辅助。

为什么 details 标签不适合做侧边栏菜单

details 元素设计初衷是「用户主动展开/收起一段附属内容」，其行为受浏览器控制（如 Safari 会强制显示小箭头，无法彻底隐藏；Android Chrome 对嵌套或定位支持弱），且不支持：

• 点击遮罩层关闭菜单（details 只响应 summary 点击）
• 全屏覆盖、滑入动画、焦点管理等侧边栏必需交互
• 键盘导航（如 Esc 关闭、Tab 锁定在菜单内）
• 无障碍语义（没有 role="navigation" 或 aria-expanded 控制）

推荐方案：纯 CSS 侧边栏（checkbox + label + ~ 选择器）

用隐藏 checkbox 控制菜单显隐，label 触发切换，CSS 控制状态样式。结构简洁、无 JS、支持过渡动画、可无障碍增强。

HTML 结构示例：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

<input type="checkbox" id="nav-toggle" class="nav-toggle">
<label for="nav-toggle" class="nav-toggle-btn">&#9776;</label>

<aside class="sidebar">
  <nav role="navigation">
    <a href="#home">首页</a>
    <a href="#about">关于</a>
    <a href="#contact">联系</a>
  </nav>
</aside>

<main class="content">
  <h1>主内容区</h1>
  <p>点击左上角按钮展开侧边栏</p>
</main>

CSS 关键逻辑：

立即学习“前端免费学习笔记（深入）”；

• 将 .nav-toggle 定位为 fixed 左上角，opacity: 0，z-index: -1
• .nav-toggle-btn 作为可见触发按钮（可用 icon font 或 SVG）
• .sidebar 初始 translateX(-100%)，transition: transform .3s ease
• 当 #nav-toggle:checked ~ .sidebar 时，设 transform: translateX(0)
• 添加半透明遮罩层（可用 ::after 伪元素盖在 main 上），点击即取消选中（需 label 包裹遮罩）

如果坚持用 details，只能做“侧边栏里的折叠区块”

details 可作为侧边栏内部的二级分类容器，例如在「产品分类」下折叠子项：

<aside class="sidebar">
  <nav>
    <details>
      <summary>? 移动端工具</summary>
      <a href="#ui-kit">UI 套件</a>
      <a href="#debug">调试工具</a>
    </details>
    <a href="#docs">文档中心</a>
  </nav>
</aside>

此时可用 CSS 隐藏原生箭头：

details summary { list-style: none; }<br>
details summary::marker { display: none; }

再自定义展开图标（如用 ::after 加 + / ▼），配合 transition 实现平滑高度变化。

移动端适配要点

• 侧边栏宽度建议设为 80vw 或 280px，避免遮挡重要内容
• 使用 @media (prefers-reduced-motion: reduce) 关闭动画，提升可访问性
• 为 .sidebar 添加 touch-action: pan-y 防止 iOS 滑动冲突
• 给 nav 中的 a 标签设置足够点击热区（padding ≥ 44px）符合 Apple HIG
• 用 position: sticky 或 flex 布局确保 sidebar 在滚动时保持可用