如何用CSS制作移动端汉堡菜单？-css教程-PHP中文网

纯 css 汉堡菜单必须用，因其 :checked 伪类是唯一无需 js 即可响应点击并切换样式的机制；配合隐藏复选框、兄弟选择器、正确 transform-origin 及层叠上下文处理，实现图标旋转与菜单显隐。

如何用css制作移动端汉堡菜单？

为什么纯 CSS 汉堡菜单要用 `<input type="checkbox">`

因为 CSS 本身没有事件监听能力，:checked 是唯一能响应用户点击并触发样式切换的伪类。用 <input type="checkbox"> 隐藏后，它就成了一个“状态开关”——点一下变选中，再点一下取消，CSS 就能据此控制图标旋转和菜单显隐。

别用 <button></button> 或 <div> + <code>onclick，那必须配 JS；也别用 <input type="radio">，它无法“关掉”，菜单展开后没法收回去。

<input id="menu-toggle" type="checkbox"> 必须放在 DOM 前置位置（比如开头），否则兄弟选择器 ~ 会失效
对应 <label for="menu-toggle"></label> 要紧挨着它，或用 + 相邻选择器控制图标动画
opacity: 0; position: absolute; 隐藏复选框，但不能写 display: none，否则状态不可读

`transform-origin` 写错会导致汉堡图标变形错位

三道横线转成 × 的动画，本质是三根 <span></span> 分别旋转：中间线转 45°，上面那根转 0°（与之中重合），下面那根转 90°（垂直交叉）。但所有旋转都依赖 transform-origin 的基准点。

如果没设或设成默认的 center，线条会绕自己中心转，结果是“飘在空中”，而不是从左端“翻折”过去。正确做法是统一设为 left center：

span {
  transform-origin: left center;
}
#menu-toggle:checked + .menu-btn > span {
  transform: rotate(45deg);
}
#menu-toggle:checked + .menu-btn > span::before {
  transform: rotate(0deg);
}
#menu-toggle:checked + .menu-btn > span::after {
  transform: rotate(90deg);
}

注意：::before 和 ::after 的 transform-origin 默认继承父元素，所以也要显式声明，否则安卓 WebView 上容易错位。

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

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

下载

菜单弹出后被遮挡？大概率是 `z-index` 失效了

不是数值不够大，而是父容器创建了新的层叠上下文（stacking context），把菜单“锁”在局部层级里。常见触发条件：transform、opacity 、<code>filter、will-change —— 只要 <header></header> 或 <nav></nav> 用了其中任意一个，菜单就可能被盖住。

用 DevTools 查看菜单元素的 computed z-index，如果是 auto，说明没生效
把菜单容器（.menu-box）动态挂到下，绕过父级限制
确保 position: fixed 的菜单有 top: 0; left: 0; width: 100vw; height: 100vh;，不用 %，避免继承缩放干扰
加 will-change: transform; 在动画期间，但别写在默认状态里