响应式汉堡菜单点击后未消失仅右移，求技术排查解决

问题根源分析 #

1. HTML标签结构错误：hamburger-menu标签未正确闭合，header、nav-container的嵌套关系混乱，导致DOM解析异常，干扰CSS布局生效。
2. 绝对定位参考父元素缺失：移动端nav使用position:absolute，但未给父容器.header设置position:relative，菜单会相对于整个文档定位，而非头部区域。
3. 横向滚动条未截断：菜单移出视口时，页面未设置overflow-x:hidden，超出部分触发滚动条。
4. 样式优先级冲突：桌面端nav的flex-grow:1属性未在移动端重置，干扰了菜单的隐藏逻辑。

具体修复步骤 #

1. 修复HTML结构错误

确保所有标签正确闭合、嵌套合理：

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" rel="stylesheet"/>
<div class="header">
  <div class="nav-container">
    <span class="logo lato-bold">DacHOW<i class="fa-regular fa-circle-question"></i></span>
    <nav class="nav">
      <ul class="nav-ul">
        <li class="nav-link"><a href="#">Home</a></li>
        <li class="nav-link"><a href="#">First steps</a></li>
        <li class="nav-link"><a href="#">BAMF/Asylum</a></li>
        <li class="nav-link"><a href="#">Bezahlkarte</a></li>
        <li class="nav-link"><a href="#">Health</a></li>
        <li class="nav-link"><a href="#">School</a></li>
      </ul>
    </nav>
    <span class="hamburger-menu material-symbols-outlined"><i class="fa-solid fa-bars"></i></span>
  </div>
</div>

2. 调整CSS关键属性

给父容器添加定位参考和溢出截断，重置移动端样式优先级：

/* NAVIGATION */
.header {
  position: relative; /* 为绝对定位的nav提供参考容器 */
  overflow-x: hidden; /* 截断横向溢出内容，消除滚动条 */
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 90%;
  margin: 0 auto;
}

.nav-container .logo {
  font-size: 2.5rem;
  font-weight: bold;
}

.nav {
  display: flex;
  flex-grow: 1;
}

.nav-ul {
  margin: 0 auto;
}

.nav-container,
.nav-ul {
  display: flex;
  gap: 1.6rem;
  font-size: 1.2rem;
}

.hamburger-menu {
  display: none;
  cursor: pointer;
}

.dropdown-content {
  display: none;
}

/* NAVIGATION MEDIA QUERY*/
@media (max-width: 700px) {
  .nav-container .logo {
    font-size: 1.2rem;
    z-index: 2;
  }

  .hamburger-menu {
    display: block;
    z-index: 2;
  }

  /* 重置桌面端样式，确保移动端布局纯净 */
  .nav {
    flex-grow: unset;
    flex-direction: column;
    gap: 2rem;
    position: absolute;
    top: 0;
    right: -100%;
    bottom: 0;
    width: 100%;
    padding-top: 6rem;
    align-items: center;
    text-align: center;
    background-color: #4D4DDB;
    color: white;
    transition: 0.15s ease-in-out;
    z-index: 1; /* 保证菜单在头部元素下方但覆盖页面内容 */
  }

  .nav-ul {
    flex-direction: column;
    gap: .6rem;
  }

  .nav.active {
    right: 0;
  }
}

3. 优化JS执行时机

确保DOM加载完成后再绑定事件（若JS放在<head>标签内）：

document.addEventListener('DOMContentLoaded', () => {
  const hamburgerMenu = document.querySelector(".hamburger-menu");
  const nav = document.querySelector(".nav");

  hamburgerMenu.addEventListener("click", () => {
    nav.classList.toggle("active")
  });
});

修复后效果 #

• 默认状态下，移动端菜单完全移出视口右侧，无滚动条。
• 点击汉堡按钮时菜单平滑移入，再次点击平滑移出。
• 菜单始终相对于头部区域定位，无偏移问题。

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