本文介绍一种完全基于 CSS 的汉堡菜单实现方案，通过合理使用 :checked 伪类、~ 兄弟选择器和 pointer-events 属性，彻底避免 JavaScript 冲突，确保每次点击标签即可精准触发菜单显示/隐藏，无需双击。
本文介绍一种完全基于 css 的汉堡菜单实现方案，通过合理使用 :checked 伪类、~ 兄弟选择器和 pointer-events 属性，彻底避免 javascript 冲突，确保每次点击标签即可精准触发菜单显示/隐藏，无需双击。
传统依赖 jQuery 控制 .MainMenu 和 #NavDark 显隐的方式，容易与 CSS 中基于 #toggle:checked 的样式规则产生状态不一致——例如 jQuery 手动调用 .hide() 会覆盖 CSS 的 display: block !important，导致后续 :checked 状态虽已生效，但元素仍被内联样式强制隐藏，从而出现“第二次点击才响应”的典型双击问题。
根本解法：放弃 JS 干预，交由 CSS 单一可信源控制显隐逻辑。
核心思路是：将 <input type="checkbox"> 作为唯一状态源，所有 UI 变化（菜单位移、遮罩层透明度、指针事件开关）均由 #menu-toggle:checked 触发，消除 JS 与 CSS 对同一 DOM 元素的样式竞争。
以下是推荐的结构化实现：
✅ 推荐 HTML 结构（语义清晰、层级合理）
<input id="menu-toggle" type="checkbox" />
<label id="btn-hamburger" for="menu-toggle">
<img src="/img/image%208.png" alt="Open menu" style="max-width:90%" style="max-width:90%">
</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="{{ .URL }}" class="menu-item">{{ .Name }}</a>
{{ end }}
</div>
</div>⚠️ 注意：
<input>必须置于最外层（DOM 顶部），确保其后所有相关元素均可被~选择器捕获；<label></label>的for属性必须严格匹配input的id。
✅ 核心 CSS（零 JS，高可靠性）
/* 汉堡图标样式 */
#btn-hamburger {
font-size: 2.4rem;
z-index: 8;
display: inline-block !important;
cursor: pointer;
}
/* 遮罩层：默认不可见且禁止交互 */
#menu-wrapper {
position: fixed;
top: 0; left: 0;
width: 100%; height: 100dvh; /* 推荐使用 dvh 避免移动端视口缩放问题 */
background-color: rgba(0, 0, 0, 0.5);
transition: translate 0.4s ease, opacity 0.4s ease;
translate: 100% 0; /* 初始完全右移 */
opacity: 0;
pointer-events: none; /* 关键！让点击穿透至下方内容 */
z-index: 100;
}
/* 菜单主体：绝对定位在遮罩层内 */
#menu {
position: absolute;
top: 0; right: 0;
width: 320px; height: 100%;
background-color: #222;
color: #fff;
overflow-y: auto;
box-shadow: 0 0 2px #000;
pointer-events: auto; /* 菜单内允许点击 */
z-index: 101;
}
/* 关闭按钮样式（可选但推荐） */
.close-btn {
display: block;
padding: 16px;
font-size: 1.8rem;
text-align: center;
cursor: pointer;
}
/* ✅ 唯一状态触发器：勾选时激活整个菜单系统 */
#menu-toggle:checked ~ #menu-wrapper {
translate: 0 0;
opacity: 1;
pointer-events: auto; /* 遮罩层启用交互，支持点击关闭 */
}✅ 关键设计说明
-
pointer-events: none/auto是核心机制：遮罩层默认禁用事件，防止干扰页面；勾选后启用，用户点击遮罩任意位置即可关闭菜单（符合用户直觉）。 -
translate替代right动画：更高效（GPU 加速），且避免right: -320px与transform混用导致的渲染冲突。 -
100dvh替代100vh：解决 iOS Safari 中地址栏缩放导致的视口高度计算异常。 -
无 JS = 无状态冲突：彻底规避 jQuery
.show()/.hide()与 CSS:checked规则的竞态问题。
✅ 总结
若你的汉堡菜单需稳定单击响应，请立即移除所有 jQuery 显隐操作，采用上述纯 CSS 方案。它不仅解决了双击问题，还提升了性能、可访问性（原生 checkbox 支持键盘空格切换）与维护性。只需确保 HTML 结构正确、CSS 选择器精准，即可实现零故障的菜单交互体验。
立即学习“前端免费学习笔记（深入）”；
