如何仅用纯 CSS 实现单击展开/收起汉堡菜单（无需 jQuery）-html教程-PHP中文网

本文介绍一种完全基于 css 的汉堡菜单实现方案，通过 :checked 伪类与 ~ 兄弟选择器控制显隐状态，避免 jquery 事件冲突导致的双击问题，确保每次点击标签即可即时切换菜单显示。

本文介绍一种完全基于 css 的汉堡菜单实现方案，通过 :checked 伪类与 ~ 兄弟选择器控制显隐状态，避免 jquery 事件冲突导致的双击问题，确保每次点击标签即可即时切换菜单显示。

传统依赖 jQuery 控制 .MainMenu 和 #NavDark 显隐的方式，容易与 CSS 的 :checked 状态逻辑产生冲突——例如手动调用 .show() / .hide() 会覆盖 display: block !important 或破坏 opacity/transform 过渡效果，导致状态不同步，从而出现“第二次需双击才响应”的典型问题。

根本解法是放弃 JavaScript 控制显隐逻辑，交由原生表单控件（）驱动状态，用纯 CSS 响应其 :checked 状态变化。这不仅更轻量、更可靠，也天然支持无障碍访问和键盘操作（如空格键切换）。

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

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

下载

✅ 推荐结构与关键原则

语义化嵌套：将放在 DOM 最顶层（非 .ButtonMenu 内部），确保 ~ 选择器可跨层级匹配后续兄弟元素；
统一状态源：仅用一个 #menu-toggle 控制所有关联元素（菜单面板、遮罩层、图标等）；
精准指针事件控制：对遮罩层 #menu-wrapper 设置 pointer-events: none，使其不拦截点击；对菜单内容 #menu 设置 pointer-events: auto，保障内部链接可点击；
现代单位与过渡：使用 dvh（动态视口高度）替代 100vh 避免移动端 Safari 拉伸问题；用 translate + opacity 替代 display 切换，保证 CSS 过渡平滑生效。

✅ 推荐 HTML 结构（精简清晰）

<input id="menu-toggle" type="checkbox"><label id="btn-hamburger" for="menu-toggle">
  @@##@@
</label>

<div id="menu-wrapper">
  <div id="menu">
    <label for="menu-toggle" title="Close menu" class="close-btn">×</label>
    <!-- Hugo 菜单项 -->
    {{ range .Site.Menus.main }}
      <a href="%7B%7B%20.URL%20%7D%7D" class="navbar-item">{{ .Name }}</a>
    {{ end }}
  </div>
</div>

✅ 核心 CSS（无 JS 依赖，一次点击即生效）

/* 汉堡图标 */
#btn-hamburger {
  font-size: 2.4rem;
  z-index: 8;
  display: inline-block;
  cursor: pointer;
}

/* 遮罩层：初始隐藏、不可交互 */
#menu-wrapper {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100dvh;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 100;
  opacity: 0;
  translate: 100% 0;
  transition: translate 0.4s ease, opacity 0.4s ease;
  pointer-events: none; /* 关键：透传点击至下方内容 */
}

/* 菜单主体：固定右边界，初始不可见 */
#menu {
  position: absolute;
  top: 0; right: 0;
  width: 320px; height: 100dvh;
  background-color: #222;
  color: #fff;
  overflow-y: auto;
  box-shadow: 0 0 2px #000;
  pointer-events: auto; /* 关键：启用内部交互 */
}

/* ✅ 单一状态源：勾选时同时激活遮罩与菜单 */
#menu-toggle:checked ~ #menu-wrapper {
  opacity: 1;
  translate: 0 0;
}

/* 可选：关闭按钮样式 */
.close-btn {
  position: absolute;
  top: 1rem; right: 1rem;
  font-size: 1.8rem;
  cursor: pointer;
  user-select: none;
}

⚠️ 注意事项与调试提示

不要混用 JS 显隐操作：一旦引入 $(".MainMenu").show() 等 jQuery 方法，就会强制写入 style="display:block"，覆盖 CSS 的 display: none 声明，破坏 :checked 逻辑链；
检查 for 属性值是否严格匹配 id：必须与完全一致（含大小写）；
避免 z-index 冲突：确保 #menu-wrapper（z:100）高于页面其他内容，而 #btn-hamburger（z:8）仍可被点击；
移动端适配：100dvh 在 iOS Safari 中表现更稳定；若需兼容旧浏览器，可用 height: 100vh + min-height: -webkit-fill-available 备用。

该方案彻底规避了事件绑定冲突，实现真正意义上的“单击即响应”，代码更简洁、性能更高、可维护性更强——这才是现代前端菜单交互的理想实践。