汉堡菜单点击异常：无法切换为X样式且导航项未左滑入

数据老陈

2026-8-6

汉堡菜单Bug排查与修复方案

问题核心

当前汉堡菜单存在两个关键问题：

点击后仅中间bar消失，无法切换为X样式
导航列表无法从左侧平滑滑入

错误点及修复方案

1. HTML类名冲突

你的<li>元素错误复用了nav-menu类（与父级<ul>类名重复），但CSS中定义的.nav-item才是控制列表项间距的选择器，导致样式不生效。

修正后的HTML导航段：

<ul class="nav-menu">
    <li class="nav-item">
        <a href="#" class="nav-link">Home</a>
    </li>
    <li class="nav-item">
        <a href="#" class="nav-link">News</a>
    </li>
    <li class="nav-item">
        <a href="#" class="nav-link">Popular</a>
    </li>
    <li class="nav-item">
        <a href="#" class="nav-link">Trending</a>
    </li>
    <li class="nav-item">
        <a href="#" class="nav-link">Catergories</a>
    </li>
</ul>

2. CSS旋转属性错误

汉堡菜单的X样式误用了rotateY()（3D绕Y轴旋转），正确做法是用translateY()调整bar位置后，再用rotate()做2D旋转。另外，移动端导航背景为黑色，需修改链接颜色为白色避免文字不可见。

修正后的CSS媒体查询段：

@media (max-width: 768px) {
  .hamburger {
    display: block;
  }
  .hamburger.active .bar:nth-child(2) {
    opacity: 0;
  }
  .hamburger.active .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }
  .hamburger.active .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }
  .nav-menu {
    position: fixed;
    left: -100%;
    top: 70px;
    gap: 0;
    flex-direction: column;
    width: 100%;
    background-color: black;
    text-align: center;
    transition: 0.3s ease;
  }
  .nav-item {
    margin: 16px 0;
  }
  .nav-link {
    color: white;
  }
  .nav-menu.active {
    left: 0;
  }
}