响应式Hamburger Menu点击无显示问题求助（附代码）

问题核心原因 #

代码逻辑本身无错误，问题出在CSS的选择器写法和两处笔误：

1. 媒体查询中控制菜单展开的选择器错误：.nav-menu .active 表示选中.nav-menu下的.active子元素，但实际需要给.nav-menu自身添加active类后生效，应改为.nav-menu.active
2. .navbar的min-height属性值写错成70x，正确应为70px
3. .nav-link的过渡时间写成07s，正确应为0.7s

修复后的完整代码 #

修正后的CSS代码

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

header {
  background-color: #2c3e50;
  color: #f1eeec;
  text-align: center;
  padding: 1em 0;
}

nav {
  background-color: #34495e;
  color: #ecf0f1;
  padding: 0.5em;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-around;
}

nav a {
  text-decoration: none;
  color: #ecf0f1;
}

.navbar {
  min-height: 70px; /* 修正笔误：70x → 70px */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
}

.nav-menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 60px;
}

.nav-link {
  transition: 0.7s ease; /* 修正笔误：07s → 0.7s */
}

.nav-link:hover {
  color: dodgerblue;
}

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

.bar {
  display: block;
  width: 25px;
  height: 3px;
  margin: 5px auto;
  -webkit-transition: all 0.3 ease-in-out;
  transition: all 0.3 ease-in-out;
  background-color: white;
}

@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;
    background-color: #2c3e50;
    width: 100%;
    text-align: center;
    transition: 0.3s;
  }
  .nav-item {
    margin: 16px 0;
  }
  .nav-menu.active { /* 修正选择器：.nav-menu .active → .nav-menu.active */
    left: 0;
  }
}

JS代码（无需修改）

const hamburger = document.querySelector(".hamburger");
const navMenu = document.querySelector(".nav-menu");

hamburger.addEventListener("click", () => {
  hamburger.classList.toggle("active");
  navMenu.classList.toggle("active");
})

document.querySelectorAll(".nav-link").forEach(n => n.addEventListener("click", () => {
  hamburger.classList.remove("active");
  navMenu.classList.remove("active");
}))

HTML代码（无需修改）

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Home </title>
  <link rel="stylesheet" href="style.css">
  <link rel="icon" href="Favicon/favicon.ico" />

</head>

<body>
  <header>
    <h1>Tallinn University HCI Hub</h1>
    <p>Connecting the World of Human-Computer Interaction</p>
  </header>

  <nav class="navbar">
    <ul class="nav-menu">
      <li class="nav-item"><a href="events.html" class="nav-link">Events</a></li>
      <li class="nav-item"><a href="speakers.html" class="nav-link">Speakers</a></li>
      <li class="nav-item"><a href="testimonials.html" class="nav-link">Testimonials</a></li>
      <li class="nav-item"><a href="meme.html" class="nav-link">UniMeme Mingles</a></li>
      <li class="nav-item"><a href="blog.html" class="nav-link">Blog</a></li>
      <li class="nav-item"><a href="shop.html" class="nav-link">UniStyle Event Shop</a></li>
    </ul>

    <div class="hamburger">
      <span class="bar"></span>
      <span class="bar"></span>
      <span class="bar"></span>
    </div>
  </nav>



  <section id="about-us">
    <div class="index-container">
      <h2>About Us</h2>
      <p>Welcome to the Tallinn University Human-Computer Interaction Hub! Our mission is to provide a vibrant platform for HCI enthusiasts, students, and professionals to connect, learn, and thrive. Explore the exciting world of HCI with us!</p>

      <p>At the heart of our community is a commitment to collaborate, innovate, and share knowledge. We believe in the power of human-computer interaction to shape the future of technology and enhance the way we live and work.</p>

      <p>Our diverse community includes students, researchers, industry professionals, and anyone passionate about HCI. Whether you're just starting your journey in HCI or are an experienced practitioner, there's a place for you in our hub.</p>

      <p>Join us in creating a dynamic environment where ideas are exchanged, skills are honed, and meaningful connections are made. Together, let's push the boundaries of HCI and make a positive impact on the world.</p>

      <img src="images/smartworks-coworking-cW4lLTavU80-unsplash.jpg" alt="About Us Image" style="max-width: 100%; height: auto;">
    </div>
  </section>


  <section id="highlights">
    <div class="index-container">
      <h2>Highlights</h2>

      <div class="highlight">
        <div class="highlight-content">
          <h3>Upcoming Events</h3>
          <p>Stay updated on the latest events in the field of HCI.</p>
        </div>

      </div>

      <div class="highlight">
        <div class="highlight-content">
          <h3>Featured Speakers</h3>
          <p>Learn from industry experts and thought leaders.</p>
        </div>

      </div>

      <div class="highlight">
        <div class="highlight-content">
          <h3>Meetup Rooms</h3>
          <p>Connect with like-minded individuals in our meetup spaces.</p>
        </div>

      </div>

      <div class="highlight">
        <div class="highlight-content">
          <h3>Networking Opportunities</h3>
          <p>Expand your network within the HCI community.</p>
        </div>

      </div>

      <div class="highlight">
        <div class="highlight-content">
          <h3>Mentoring Program</h3>
          <p>Engage in mentorship to enhance your HCI journey.</p>
        </div>

      </div>

      <div class="highlight">
        <div class="highlight-content">
          <h3>Hub Blog</h3>
          <p>Explore insightful articles and updates in our blog section.</p>
        </div>

      </div>

    </div>
  </section>

  <footer>
    <div class="index-container">
      <p>&copy; 2023 Tallinn University HCI Hub</p>
    </div>
  </footer>
  <script src="index.js"></script>
</body>

</html>

内容的提问来源于stack exchange，提问作者Fadzai Emmah Nembaware