能，需用作为状态开关，配合:checked ~ .sidebar兄弟选择器、left或transform位移及transition动画实现伸缩；DOM结构必须严格同级且input在前。

侧边菜单如何用纯CSS实现伸缩，不依赖JavaScript

纯CSS实现侧边菜单伸缩是可行的，核心靠 :checked 伪类 + <input type="checkbox"> 控制状态，配合 ~（兄弟选择器）和过渡动画。关键不是“能不能”，而是“DOM结构必须严格满足兄弟关系”。

• 菜单容器（.sidebar）必须紧跟在 <input> 后面，且在同一父级下，否则 ~ 无法选中
• 触发按钮必须是 <label for="menu-toggle"></label>，不能用 div 或 button 直接操作 input，否则移动端点透或 focus 行为异常
• 伸缩动画推荐用 max-width + overflow 配合 transition，避免用 width 导致小屏下文字换行错乱
• 示例结构：

  <input type="checkbox" id="menu-toggle" hidden>
  <label for="menu-toggle">☰</label>
  <aside class="sidebar">...</aside>

移动端适配时，如何防止菜单遮挡内容或滚动失效

常见问题是 position: fixed 的侧边栏在 iOS Safari 下导致 body 滚动卡顿，或安卓 Chrome 中 overflow: hidden 失效。根本原因是浏览器对 fixed 元素 + transform 的合成层处理差异。

• 不要对 body 设置 overflow: hidden，改用 html 层级加 overscroll-behavior: none 阻止弹性滚动穿透
• 侧边栏自身用 position: fixed + top: 0 + height: 100vh，但必须加 will-change: transform 触发硬件加速
• 菜单内列表项若含长文本，需设 white-space: nowrap 和 text-overflow: ellipsis，否则伸缩后宽度计算错误
• 避免在 .sidebar 上直接写 transform: translateX(-100%) 动画——iOS 会丢帧，改用 left: -100% + transition: left

Vue/React 项目里怎么复用这套CSS逻辑

框架里直接套用纯CSS方案没问题，但要注意框架的 class 绑定和事件机制可能干扰原生 checkbox 状态。重点不是重写逻辑，而是隔离控制权。

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

• 在 Vue 中，别用 v-model 绑定 input[type="checkbox"]，保留原生 id/for 关系；如需响应式控制，监听 @change 更新 data，而非覆盖 DOM 状态
• React 中避免把 input 写成受控组件（即同时设 checked 和 onChange），否则点击 label 时 checkbox 状态和 React state 不同步
• 框架组件内嵌该菜单时，确保父容器没有 overflow: hidden 或 transform，否则会裁剪 fixed 元素
• 如果要用 transition-group 做进入动画，别套在 .sidebar 上——它本身已有 CSS transition，重复叠加会导致 timing conflict

IE11 兼容时哪些CSS特性必须降级

IE11 不支持 :checked ~ .sidebar 在某些嵌套场景下的正确匹配（尤其当中间有注释或空格节点时），也缺少 will-change 和部分 transform 支持。

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

• 必须改用 JavaScript fallback：监听 click 事件，手动切换 .is-open class，再由 CSS 控制显示/隐藏
• 动画降级为 visibility + opacity，禁用 max-width 过渡（IE 对 max-width transition 支持极差）
• 避免使用 flex 布局侧边栏内部导航项，改用 display: block + padding 模拟间距
• IE 下 label[for] 若指向不在同一 scope 的 input（比如跨 shadow DOM），会失效，此时必须用 ref + click() 模拟

实际写的时候，最易被忽略的是兄弟选择器的 DOM 位置约束和 iOS fixed 元素的滚动行为——这两处出问题，调试起来不像 JS 报错那么直观，得靠真机反复验证。