点击汉堡菜单后部分导航链接消失且无法关闭的问题求助

问题诊断 #

1. 导航链接仅显示About：媒体查询中.menu-open .nav-links设置了top:0，导致导航栏与顶部logo区域重叠，Projects、Skills、Contact被遮挡，仅第一个About链接可见。
2. 无法关闭菜单：菜单打开后，导航栏覆盖在汉堡按钮上方，点击事件无法触发到.menu-toggle元素，无法切换关闭状态。
3. 缺少状态反馈：未在菜单打开/关闭时切换汉堡/关闭图标，用户无法直观感知菜单状态。

修复步骤 #

1. 修正CSS定位与层级问题 #

修改媒体查询内的样式，调整导航栏位置并确保汉堡按钮层级最高：

/* 全局添加隐藏类 */
.hidden {
  display: none !important;
}

/* hamburger functionality */
.menu-toggle {
  display: none;
}

.menu-open .nav-links {
  display: flex;
}

.menu-open .social {
  display: flex;
}

header>nav ul {
  display: flex;
  align-items: center;
}

nav ul li {
  margin: 0 23px;
  list-style: none;
}

nav ul li a {
  text-decoration: none;
  color: var(--text-color);
  font-size: 18px;
  transition: all 0.3s ease-out;
}

nav ul li a:hover {
  cursor: pointer;
  color: var(--text-hover);
  transform: scale(1.3);
}

.social {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 50px;
  background: none;
}

.social img {
  transition: all 0.3s ease-out;
}

.social img:hover {
  cursor: pointer;
  transform: scale(1.3);
}

@media screen and (max-width:718px) {
  .menu-toggle {
    display: block;
    cursor: pointer;
    /* 确保汉堡按钮在最上层，不被导航栏覆盖 */
    position: relative;
    z-index: 100;
  }

  .hamburger img, .close svg {
    width: 35px;
    filter: invert(1);
  }

  .nav-links,
  .social {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: var(--background);
    padding: 10px 0;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
    z-index: 10;
  }

  .nav-links li {
    margin: 10px 0;
    text-align: center;
  }

  .nav-links a {
    color: var(--text-color);
  }

  .nav-links a:hover {
    color: var(--text-hover);
  }

  .social {
    display: none;
    /* 调整社交链接位置，避免与导航栏重叠 */
    top: calc(100% + 180px);
  }

  /* 移除top:0，保持与初始定位一致，避免和logo重叠 */
  .menu-open .nav-links {
    display: flex;
  }
}

2. 优化JavaScript逻辑，添加图标切换 #

更新JS代码，处理汉堡/关闭图标的切换：

const menuToggle = document.querySelector('.menu-toggle');
const hamburgerIcon = menuToggle.querySelector('.hamburger');
const closeIcon = menuToggle.querySelector('.close');

menuToggle.addEventListener('click', () => {
  document.body.classList.toggle('menu-open');
  // 切换汉堡/关闭图标显示状态
  hamburgerIcon.classList.toggle('hidden');
  closeIcon.classList.toggle('hidden');
});

3. 更新HTML，添加关闭图标 #

在.menu-toggle中加入关闭SVG，默认隐藏：

<header>
  <nav>
    <div class="logo">
      <span><a href="#home">Aditya.</a></span>
    </div>
    <div class="menu-toggle">
      <div class="hamburger"><img src="/assets/svg/hamburger.svg" alt="hamburger"></div>
      <!-- 关闭图标，默认隐藏 -->
      <div class="close hidden">
        <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="35" height="35" viewBox="0,0,256,256">
          <g fill="#d5d5d5" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal">
            <g transform="scale(5.12,5.12)">
              <path d="M9.15625,6.3125l-2.84375,2.84375l15.84375,15.84375l-15.9375,15.96875l2.8125,2.8125l15.96875,-15.9375l15.9375,15.9375l2.84375,-2.84375l-15.9375,-15.9375l15.84375,-15.84375l-2.84375,-2.84375l-15.84375,15.84375z"></path>
            </g>
          </g>
        </svg>
      </div>
    </div>
    <ul class="nav-links">
      <li><a href="#about">About</a></li>
      <li><a href="#projects">Projects</a></li>
      <li><a href="#skills">Skills</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
    <div class="social">
      <a href="https://github.com/aditya9-2" target="_blank"> <img src="assets/github.png" alt="github" width="25" height="25"></a>
      <a href="https://linkedin.com/in/aadityabasak20" target="_blank"> <img src="assets/LinkedIn.png" alt="LinkedIn" width="25" height="25"></a>
      <a href="https://x.com/aadityaa027?t=QolEyjPnS_MgghSikQeP0g&s=08" target="_blank"> <img src="assets/x.png" alt="x" width="25" height="25"></a>
    </div>
  </nav>
</header>

修复说明 #

• 调整.nav-links的top值，避免与顶部logo区域重叠，确保所有导航链接可见。
• 给.menu-toggle设置更高的z-index，确保菜单打开时仍能点击到按钮关闭菜单。
• 添加汉堡/关闭图标切换逻辑，提升用户交互体验。
• 调整.social的top值，避免与导航栏重叠。

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