实现带下拉菜单的响应式导航栏（移动端显示汉堡菜单）

完整代码实现 #

HTML 结构 #

<nav class="navbar">
  <div class="nav-container">
    <a href="#" class="nav-logo">MySite</a>
    <!-- 汉堡按钮，小屏幕显示 -->
    <button class="hamburger" id="hamburger">
      <span></span>
      <span></span>
      <span></span>
    </button>
    <!-- 导航菜单 -->
    <ul class="nav-menu" id="navMenu">
      <li class="nav-item">
        <a href="#" class="nav-link">首页</a>
      </li>
      <li class="nav-item dropdown">
        <a href="#" class="nav-link dropdown-toggle">分类</a>
        <ul class="dropdown-menu">
          <li><a href="#" class="dropdown-link">分类1</a></li>
          <li><a href="#" class="dropdown-link">分类2</a></li>
          <li><a href="#" class="dropdown-link">分类3</a></li>
        </ul>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">关于我们</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">联系我们</a>
      </li>
    </ul>
  </div>
</nav>

CSS 样式（包含媒体查询） #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

.navbar {
  background-color: #333;
  padding: 1rem 0;
  position: relative;
}

.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-logo {
  color: white;
  text-decoration: none;
  font-size: 1.5rem;
  font-weight: bold;
}

/* 默认隐藏汉堡按钮 */
.hamburger {
  display: none;
  flex-direction: column;
  background: transparent;
  border: none;
  cursor: pointer;
}

.hamburger span {
  width: 25px;
  height: 3px;
  background-color: white;
  margin: 3px 0;
  transition: 0.3s;
}

.nav-menu {
  display: flex;
  list-style: none;
  gap: 2rem;
  align-items: center;
}

.nav-link {
  color: white;
  text-decoration: none;
  padding: 0.5rem 0;
  transition: color 0.3s;
}

.nav-link:hover {
  color: #ffd700;
}

/* 下拉菜单样式 */
.dropdown {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #444;
  list-style: none;
  min-width: 150px;
  display: none;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.dropdown:hover .dropdown-menu {
  display: block;
}

.dropdown-link {
  color: white;
  text-decoration: none;
  padding: 0.8rem 1rem;
  display: block;
  transition: background-color 0.3s;
}

.dropdown-link:hover {
  background-color: #555;
}

/* 媒体查询：小屏幕设备（宽度≤768px） */
@media (max-width: 768px) {
  .hamburger {
    display: flex;
  }

  .nav-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #333;
    width: 100%;
    flex-direction: column;
    padding: 1rem 0;
    gap: 1rem;
    display: none;
  }

  /* 菜单展开状态 */
  .nav-menu.active {
    display: flex;
  }

  .dropdown-menu {
    position: static;
    background-color: #444;
    box-shadow: none;
    margin-top: 0.5rem;
  }
}

JavaScript 交互逻辑 #

const hamburger = document.getElementById('hamburger');
const navMenu = document.getElementById('navMenu');

// 汉堡按钮点击切换菜单显示/隐藏
hamburger.addEventListener('click', () => {
  navMenu.classList.toggle('active');
  // 汉堡按钮动画（可选）
  hamburger.classList.toggle('active');
});

// 点击菜单链接后关闭菜单（提升移动端体验）
document.querySelectorAll('.nav-link').forEach(link => {
  link.addEventListener('click', () => {
    navMenu.classList.remove('active');
    hamburger.classList.remove('active');
  });
});

// 点击页面其他区域关闭菜单（可选优化）
document.addEventListener('click', (e) => {
  if (!hamburger.contains(e.target) && !navMenu.contains(e.target)) {
    navMenu.classList.remove('active');
    hamburger.classList.remove('active');
  }
});

关键说明 #

• 汉堡菜单触发逻辑：小屏幕下默认隐藏导航菜单，点击汉堡按钮通过添加/移除active类控制菜单显示，彻底解决小屏幕导航栏截断问题。
• 下拉菜单适配：移动端将下拉菜单改为静态显示，避免绝对定位导致的布局错乱，同时保留hover/点击触发的交互逻辑。
• 响应式断点：使用768px作为适配断点，可根据需求调整为600px等其他值。
• 样式优化：统一盒模型消除默认边距干扰，添加过渡动画提升交互流畅度。

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