用HTML代码实现折叠式侧边导航栏-html教程-PHP中文网

折叠式侧边导航栏需css transform配合javascript切换类实现，html无法独立完成交互；正确做法是用translatex(-100%)隐藏并保留可访问性，避免display:none导致过渡失效，同时兼顾键盘导航与屏幕阅读器支持。

用html代码实现折叠式侧边导航栏

折叠式侧边导航栏的核心是 CSS transform + JavaScript 切换类

纯 HTML 无法实现折叠/展开交互，必须配合 CSS 控制宽度/位移 + JS 响应点击。常见错误是只写 display: none 切换，导致子菜单无法平滑过渡或父容器不收缩。正确做法是用 transform: translateX(-100%) 隐藏，保留文档流和可访问性。

侧边栏容器设固定 width（如 240px），折叠时用 transform: translateX(-100%) 移出视口
触发按钮（如汉堡图标）绑定 click 事件，切换侧边栏元素的 is-collapsed 类
为 transform 和 opacity 添加 transition，避免生硬跳变
记得在折叠状态下给 body 加 overflow-x: hidden，防止横向滚动条闪现

HTML 结构要区分“触发器”和“导航容器”

结构松散或层级错位会导致 JS 找不到目标元素，或点击穿透到背景。常见错误是把按钮塞进 <nav></nav> 内部，结果折叠后按钮一起消失。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

按钮独立放在 <header></header> 或页面顶部，用 data-target="#sidebar" 显式关联
侧边栏用 <nav id="sidebar"></nav> 包裹，内部用语义化 <ul><li><a></a></li></ul>
每个菜单项若带子菜单，用 <details><summary></summary></details> 可免 JS 实现基础展开（但不支持动画）；否则需额外加 aria-expanded 和 aria-controls

JavaScript 只需 toggle class，别手动改 style

直接操作 element.style.transform 会覆盖 CSS 中定义的 transition，且难以维护。用 class 切换是最可控的方式。

const toggleBtn = document.querySelector('[data-toggle="sidebar"]');
const sidebar = document.querySelector('#sidebar');

toggleBtn.addEventListener('click', () => {
  sidebar.classList.toggle('is-collapsed');
  toggleBtn.setAttribute(
    'aria-expanded',
    sidebar.classList.contains('is-collapsed') ? 'false' : 'true'
  );
});

监听 click 即可，不用 touchstart —— 现代浏览器自动兼容移动端点击
避免用 getElementsByClassName，优先选 querySelector，更精准
记得同步更新 aria-expanded 属性，这对屏幕阅读器用户是刚需

移动端适配关键：用 max-width 媒体查询重置折叠状态

PC 上默认展开、移动端默认折叠是合理策略，但很多人忘了在小屏下强制应用 is-collapsed，导致首次加载时侧边栏遮挡内容。

在 CSS 中写 @media (max-width: 768px) { #sidebar { transform: translateX(-100%); } }
不要依赖 JS 在 onload 后判断宽度再加 class —— 有 FOUC 风险，且 SSR 场景下不可靠
如果使用 Vue/React，注意服务端渲染时初始 class 要和服务端一致，否则 hydration 报错

实际交互中最容易被忽略的是键盘可访问性：折叠后按 Tab 键仍能聚焦到隐藏菜单项。必须配合 is-collapsed 类设置 visibility: hidden 和 pointer-events: none，同时用 aria-hidden="true" 告诉辅助技术跳过这部分。