纯CSS实现响应式汉堡菜单的问题排查及正确实现方案

问题根源分析 #

你的代码主要存在以下几个问题导致功能失效：

• 触发逻辑错误：使用:target选择器时，锚点指向#而非菜单容器的ID，且.expand-btn是<span>标签，不是锚点目标，导致点击汉堡图标无法触发菜单显示。
• HTML结构错误：汉堡菜单的<div class="hamburger-menu">多了一个闭合</div>，导致布局嵌套混乱。
• 菜单样式缺失：汉堡菜单背景的定位、内容排版未设置，即使显示也无法正常展示链接。
• 移动端布局冲突：body设置了overflow: hidden，会导致页面无法滚动，且菜单显示后内容可能被遮挡。

修正后的完整代码 #

CSS 代码

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');

* {
  box-sizing: border-box;
}

body {
  border: 0;
  padding: 0;
  margin: 0;
  font-family: Inter, sans-serif;
  background-color: rgba(27, 47, 57);
  color: rgba(182, 57, 127);
  /* 移除overflow: hidden，允许页面滚动 */
}

.container {
  position: relative; /* 为汉堡菜单的绝对定位提供基准 */
}

.sub-container {
  padding: 0 4rem;
}

.hero {
  min-height: 90vh;
  padding: 4rem 0;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.villan {
  flex: 1 1;
  padding: 2rem 0;
  border-top: 1px solid #eaeaea82;
  display: flex;
  max-height: 10vh;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
}

.villan div {
  margin: 0 1rem;
  text-align: center;
}

div.box {
  text-align: left;
}

a {
  color: #0070f3;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

h1 {
  color: rgba(148, 199, 47);
  text-decoration: underline;
}

.mono {
  font-family: 'Roboto Mono', monospace;
}

.role {
  font-weight: bold;
}

.material-symbols-rounded {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 48;
  color: aliceblue;
  font-size: 50px;
}

/* 汉堡菜单默认隐藏 */
.hamburger-menu {
  display: none;
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 100;
}

/* 汉堡菜单容器：默认隐藏，全屏覆盖 */
#ham-menu-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(27, 47, 57, 0.95);
  z-index: 90;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2rem;
}

/* 点击锚点后显示菜单 */
#ham-menu-bg:target {
  display: flex;
}

/* 关闭按钮样式 */
.close-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
}

/* 移动端响应式规则 */
@media screen and (max-width: 600px) {
  .villan {
    display: none;
  }
  .hamburger-menu {
    display: block;
  }
  .sub-container {
    padding: 0 1rem; /* 缩小移动端内边距 */
  }
}

HTML 代码

<body>
  <div class="container">
    <!-- 汉堡菜单触发按钮 -->
    <div class="hamburger-menu">
      <a href="#ham-menu-bg">
        <span class="material-symbols-rounded">menu</span>
      </a>
    </div>

    <!-- 汉堡菜单内容容器 -->
    <div id="ham-menu-bg">
      <a href="#" class="close-btn">
        <span class="material-symbols-rounded">close</span>
      </a>
      <a href="mailto:example@mail.com">Mail</a>
      <a href="./main.html">More to read here.</a>
      <a href="contact.html">contact</a>
    </div>

    <div class="sub-container">
      <main class="hero">
        <div class="box">
          <h1 class="mono">Hello, World!~</h1>
          <p class="mono">I am <span class="name"><b>Om</b> (<i>aka</i> <b>potatochips</b>).</span><br><br> I am a
            <span class="role">Developer.</span>
            <span class="role">Designer.</span>
            <span class="role">Student.</span><br>
            <span class="role">Hacker.</span>
            <span class="role">Gamer.</span>
            <span class="role">Weeb.</span>
            <span class="role">Human.</span>
            <span class="role">Potato.</span>
          </p>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod <br>tempor incididunt ut
            labore et dolore magna aliqua. Ut enim ad minim <br>veniam, quis nostrud exercitation ullamco
            laboris<br> nisi ut aliquip ex ea commodo consequat.</p>
        </div>
      </main>
      <section class="villan">
        <div class="mail"><a href="mailto:example@mail.com">Mail</a></div>
        <div class="more"><a href="./main.html">More to read here.</a></div>
        <div class="contact"><a href="contact.html">contact</a></div>
      </section>
    </div>
  </div>
</body>

关键修复说明 #

1. 触发逻辑修正：将汉堡按钮的锚点指向菜单容器的ID #ham-menu-bg，通过:target选择器控制菜单显示；新增关闭按钮，点击后锚点回到#隐藏菜单。
2. HTML结构修复：移除多余的闭合</div>，整理菜单的嵌套结构。
3. 菜单样式优化：设置菜单为全屏固定定位，使用flex布局垂直居中链接，添加半透明背景提升可读性；调整汉堡按钮的位置为固定左上角，避免滚动时偏移。
4. 移动端体验优化：移除body的overflow: hidden，允许页面正常滚动；缩小移动端内容的内边距，适配小屏幕。

内容的提问来源于stack exchange，提问作者Om_Wani