如何仅用纯CSS实现单击汉堡菜单切换导航栏-html教程-PHP中文网

如何仅用纯CSS实现单击汉堡菜单切换导航栏

本文介绍一种无需javascript、仅依赖css :checked伪类和合理dom结构的汉堡菜单实现方案，解决传统方案中需双击才能触发菜单显示的问题，确保每次点击标签都能立即切换菜单状态。

本文介绍一种无需javascript、仅依赖css :checked伪类和合理dom结构的汉堡菜单实现方案，解决传统方案中需双击才能触发菜单显示的问题，确保每次点击标签都能立即切换菜单状态。

在实际开发中，混合使用 jQuery 事件（如 .show()/.hide()）与 CSS 基于 :checked 的状态控制极易引发冲突——例如你遇到的“第二次点击需双击才生效”问题，本质是 JS 手动修改了元素可见性（如 display: none 或 opacity: 0），却未同步重置 checkbox 的 checked 状态，导致后续 CSS 规则（如 #toggle:checked ~ .MainMenu）无法正确匹配，从而失效。

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

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

下载

✅ 根本解法：放弃 JS 控制显隐，完全交由 CSS 驱动
利用的天然切换特性 + :checked 伪类 + 邻居选择器（~），配合合理的 DOM 嵌套顺序，即可实现单次点击即时响应的菜单开关逻辑。

✅ 推荐结构与关键要点

DOM 顺序必须严格：必须位于最顶层（文档流最前），所有被控制元素（label、遮罩层、菜单）均在其后，并通过 ~ 选择器关联；
避免 ID 冲突与语义模糊：将 #NavDark 改为语义清晰的 #menu-wrapper，#toggle 改为 #menu-toggle；
用 translate + opacity 替代 display：display 不支持过渡动画且会破坏 :checked 关联，而 translate 和 opacity 可平滑过渡且不影响选择器匹配；
精准控制 pointer-events：遮罩层 #menu-wrapper 设置 pointer-events: none（默认穿透），激活时设为 auto；菜单内容区 #menu 始终 pointer-events: auto，确保内部链接可点击；
使用现代单位：推荐 100dvh 替代 100vh，规避 iOS Safari 中地址栏遮挡导致的高度计算异常。

✅ 完整代码示例

<!-- ✅ input 必须置于最前 -->
<input id="menu-toggle" type="checkbox"><label id="btn-hamburger" for="menu-toggle">
  @@##@@
</label>

<div id="menu-wrapper">
  <div id="menu">
    <!-- ✅ 内部关闭按钮：复用同一 checkbox，点击即取消选中 -->
    <label for="menu-toggle" title="Close menu" class="close-btn">×</label>
    <nav class="main-menu">
      {{ range .Site.Menus.main }}
        <a href="%7B%7B%20.URL%20%7D%7D" class="navbar-item">{{ .Name }}</a>
      {{ end }}
    </nav>
</div>
</div>

/* 汉堡图标 label */
#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);
  opacity: 0;
  translate: 100% 0;
  transition: translate 0.4s ease, opacity 0.4s ease;
  z-index: 100;
  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; /* 确保内部链接可点击 */
}

/* ✅ 核心：checkbox 选中时，同时激活遮罩层与菜单 */
#menu-toggle:checked ~ #menu-wrapper {
  translate: 0 0;
  opacity: 1;
  pointer-events: auto; /* 激活后可点击遮罩关闭 */
}

/* 可选：添加关闭按钮样式 */
.close-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0.5rem;
}