响应式汉堡导航菜单下拉功能失效问题求助

核心错误修复 #

1. JavaScript代码错误 #

原代码存在两个关键问题：

• 事件名写错：onClick 应为小写的 onclick
• 变量名大小写不一致：navBar 和 navbar 拼写不统一，导致无法正确获取导航栏元素

修复后的JavaScript代码：

<script>
  const hamburger = document.querySelector(".hamburger");
  hamburger.onclick = function() {
    const navBar = document.querySelector(".nav-bar");
    navBar.classList.toggle("active");
  }
</script>

2. CSS拼写错误 #

响应式CSS里的 margin-botton 是拼写错误，正确应为 margin-bottom，并且要给列表项设置间距，避免菜单链接挤在一起：

.nav-bar ul li {
  margin-bottom: 12px;
}

额外优化建议 #

1. 下拉菜单位置适配 #

原代码中header使用 height:10%，但响应式里下拉菜单的 top:80px 是固定值，会导致不同屏幕尺寸下菜单位置错位。改为 top:100% 让菜单紧贴header底部：

@media only screen and (max-width: 1320px) {
  .nav-bar {
    height: 0;
    position: absolute;
    top: 100%; /* 替换原top:80px */
    left: 0;
    right: 0;
    width: 100vw;
    background: #11101b;
    transition: 0.2s;
    overflow: hidden;
  }
}

2. 小屏幕按钮布局优化 #

当前按钮在小屏幕下会和汉堡菜单重叠，建议调整header的flex布局，让按钮移到导航栏下方：

@media only screen and (max-width: 1320px) {
  header {
    flex-wrap: wrap;
    height: auto;
    padding: 10px 5%;
  }
  header button {
    order: 3;
    width: 100%;
    margin-top: 10px;
    text-align: center;
  }
}

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