CSS响应式导航栏如何实现移动端折叠菜单？-css教程-PHP中文网

纯css移动端折叠菜单生效关键在于结构顺序、隐藏方式和状态传递：input必须前置且同级，用sr-only隐藏而非hidden或display:none，label的for与input的id须严格匹配；max-height动画需预估高度并设overflow:hidden；ios safari需加will-change和焦点管理；媒体查询应双向控制显隐，z-index需合理设置。

css响应式导航栏如何实现移动端折叠菜单？

纯 CSS 实现移动端折叠菜单，关键不是“能不能”，而是“怎么让 :checked 真正生效”——绝大多数失败案例，都卡在结构顺序、隐藏方式或状态传递这三步上。

为什么 `peer-checked` 不触发？结构和隐藏方式必须严格匹配

Tailwind 的 peer-checked:xxx 规则只对“前一个兄弟元素是 :checked 状态的 <input type="checkbox">”才起作用。常见失效原因：

<input> 没放在 <label></label> 和 <nav></nav> 的共同父容器内，或位置不在它们之前
用 hidden 属性或 display: none 隐藏 checkbox —— 这会让它失去可访问性，:checked 状态无法被 peer 识别
<label for="xxx"></label> 的 for 值和 <input id="xxx"> 不完全一致（大小写、拼写、空格）
在按钮上直接写 onclick 切换 class，绕过了 checkbox，peer-checked 完全不参与

正确做法：用 sr-only 类（或自定义 position: absolute; opacity: 0; width: 1px; height: 1px;）隐藏 checkbox，保留其表单语义和状态能力。

`max-height` 动画为何卡顿或截断？值要预估但不能硬编码

用 max-height 做展开收起动画时，max-height: 0 → max-height: 200px 是常用写法，但问题常出在：

200px 不够高，菜单项多时被 overflow: hidden 截断（尤其动态内容或字体缩放后）
max-height: 1000px 虽保险，但动画从 0→1000 插值会导致开头慢、结尾突兀
没设 overflow: hidden，展开时内容溢出，动画不可见

折中方案：max-height: 50rem（约 800px）+ transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1)，兼顾兼容性和视觉节奏。别用 height: auto，它无法过渡。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

iOS Safari 上菜单闪一下？`will-change` 和焦点恢复缺一不可

在 iOS Safari 中，peer-checked 切换后菜单偶尔“闪一下”再出现，本质是渲染层未及时提升。单纯加 transform: translateZ(0) 效果有限，更可靠的是：

给菜单容器加 will-change: transform, opacity（仅在需要动画时启用，避免滥用）
用 JS 在点击后手动调用 document.activeElement?.blur()，再 nav.focus()，防止 Safari 因焦点残留触发重绘抖动
确保 transition 写在菜单元素本身上，而不是父容器；且必须包含 transition-property 明确项，比如 transition: opacity 0.3s, transform 0.3s

注意：will-change 是性能提示，不是修复手段。如果没加 transition 就写 will-change，反而可能降低性能。