如何实现移动端导航栏：点击Hamburger图标展开导航链接

嘿，我明白你的问题啦！你已经搭好了HTML和CSS的基础，就差那关键的JS切换逻辑对吧？我给你一套完整的可运行方案，连细节优化都给你考虑到了～

1. HTML结构 #

先把导航的基础结构写好，包含汉堡按钮和导航链接容器：

<nav class="mobile-nav">
  <!-- 汉堡按钮（用SVG实现，无需外部图标文件） -->
  <button class="hamburger-btn" id="hamburgerBtn">
    <svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
      <line x1="3" y1="12" x2="21" y2="12"></line>
      <line x1="3" y1="6" x2="21" y2="6"></line>
      <line x1="3" y1="18" x2="21" y2="18"></line>
    </svg>
  </button>
  <!-- 导航链接容器 -->
  <div class="nav-links" id="navLinks">
    <a href="#home">首页</a>
    <a href="#products">产品</a>
    <a href="#about">关于我们</a>
    <a href="#contact">联系我们</a>
  </div>
</nav>

2. CSS样式 #

重点处理移动端的显示逻辑，默认隐藏导航链接，只在点击汉堡按钮后显示：

/* 基础样式重置，避免浏览器默认样式干扰 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.mobile-nav {
  position: relative;
  background-color: #fff;
  padding: 1rem 1.5rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* 汉堡按钮默认隐藏（桌面端不显示） */
.hamburger-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: #333;
  display: none;
}

/* 桌面端导航横向排列 */
.nav-links {
  display: flex;
  gap: 2rem;
}

.nav-links a {
  text-decoration: none;
  color: #333;
  font-weight: 500;
}

/* 移动端媒体查询（屏幕宽度≤768px时生效） */
@media (max-width: 768px) {
  /* 显示汉堡按钮 */
  .hamburger-btn {
    display: block;
  }

  /* 默认隐藏导航链接，用绝对定位让它在导航栏下方展开 */
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #fff;
    flex-direction: column;
    padding: 1rem 1.5rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    gap: 1rem;
  }

  /* 添加active类时显示导航链接 */
  .nav-links.active {
    display: flex;
  }
}

3. JavaScript逻辑 #

核心就是给汉堡按钮添加点击事件，切换导航链接的显示状态，还加了图标切换的小优化：

// 获取DOM元素
const hamburgerBtn = document.getElementById('hamburgerBtn');
const navLinks = document.getElementById('navLinks');

// 点击汉堡按钮时切换导航显示状态
hamburgerBtn.addEventListener('click', () => {
  // 切换active类，这是最简洁的切换方式
  navLinks.classList.toggle('active');

  // 可选：把汉堡图标切换成叉号，提升用户体验
  const svgLines = hamburgerBtn.querySelectorAll('line');
  const isActive = navLinks.classList.contains('active');
  
  svgLines.forEach((line, index) => {
    if (index === 0) {
      // 第一条线旋转到中间
      line.setAttribute('y1', isActive ? '12' : '6');
      line.setAttribute('y2', isActive ? '12' : '6');
    } else if (index === 1) {
      // 第二条线隐藏
      line.style.display = isActive ? 'none' : 'block';
    } else if (index === 2) {
      // 第三条线旋转到中间，形成叉号
      line.setAttribute('y1', isActive ? '12' : '18');
      line.setAttribute('y2', isActive ? '12' : '18');
    }
  });
});

关键知识点解释 #

• 为什么用classList.toggle()而不是直接改style.display？因为把样式逻辑放在CSS里更易维护，JS只负责控制状态类，符合关注点分离的原则。
• 媒体查询确保了响应式逻辑：桌面端显示横向导航，移动端显示汉堡按钮+下拉导航。
• 图标切换是加分项，让用户一眼就能知道当前导航是展开还是收起状态，不用瞎猜。

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