本文介绍一种完全基于 css 的汉堡菜单实现方案，通过 :checked 伪类与 ~ 兄弟选择器控制显隐状态，避免 jquery 事件冲突导致的双击问题，确保每次点击标签即可即时切换菜单显示。
本文介绍一种完全基于 css 的汉堡菜单实现方案，通过 :checked 伪类与 ~ 兄弟选择器控制显隐状态，避免 jquery 事件冲突导致的双击问题，确保每次点击标签即可即时切换菜单显示。
传统依赖 jQuery 控制 .MainMenu 和 #NavDark 显隐的方式，容易与 CSS 的 :checked 状态逻辑产生冲突——例如手动调用 .show() / .hide() 会覆盖 display: block !important 或破坏 opacity/transform 过渡效果，导致状态不同步，从而出现“第二次需双击才响应”的典型问题。
根本解法是放弃 JavaScript 控制显隐逻辑，交由原生表单控件（）驱动状态，用纯 CSS 响应其 :checked 状态变化。这不仅更轻量、更可靠，也天然支持无障碍访问和键盘操作（如空格键切换）。
✅ 推荐结构与关键原则
- 语义化嵌套：将 放在 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">
<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="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 备用。
该方案彻底规避了事件绑定冲突，实现真正意义上的“单击即响应”，代码更简洁、性能更高、可维护性更强——这才是现代前端菜单交互的理想实践。
