如何实现HTML水平导航栏在页面缩小时转为三线按钮

完整实现代码 #

HTML结构（改造原有导航栏）

<nav class="navbar">
  <!-- 汉堡按钮，宽屏时隐藏 -->
  <button class="hamburger" id="hamburgerBtn">
    <span></span>
    <span></span>
    <span></span>
  </button>
  <!-- 原有导航菜单 -->
  <ul class="nav-menu" id="navMenu">
    <li><a href="#">首页</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">联系我们</a></li>
    <li><a href="#">帮助中心</a></li>
  </ul>
</nav>

CSS样式（控制响应式显示）

/* 基础导航栏样式 */
.navbar {
  background-color: #333;
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative; /* 为子元素绝对定位提供参考 */
}

.nav-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 2rem;
}

.nav-menu a {
  color: white;
  text-decoration: none;
  font-size: 1.1rem;
}

/* 汉堡按钮默认隐藏 */
.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: all 0.3s ease;
}

/* 窄屏阈值：这里设置为768px，可根据需求修改 */
@media (max-width: 768px) {
  /* 隐藏水平菜单，改为垂直下拉 */
  .nav-menu {
    position: absolute;
    top: 100%;
    left: -100%;
    background-color: #333;
    width: 100%;
    flex-direction: column;
    padding: 1rem;
    gap: 1rem;
    transition: left 0.3s ease;
  }

  /* 显示汉堡按钮 */
  .hamburger {
    display: flex;
  }

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

  /* 汉堡按钮转叉号动画 */
  .hamburger.active span:nth-child(1) {
    transform: rotate(-45deg) translate(-5px, 6px);
  }

  .hamburger.active span:nth-child(2) {
    opacity: 0;
  }

  .hamburger.active span:nth-child(3) {
    transform: rotate(45deg) translate(-5px, -6px);
  }
}

JavaScript交互（控制菜单展开/收起）

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

// 点击汉堡按钮切换菜单状态
hamburgerBtn.addEventListener('click', () => {
  navMenu.classList.toggle('active');
  hamburgerBtn.classList.toggle('active');
});

// 点击菜单选项后自动收起菜单（可选）
document.querySelectorAll('.nav-menu a').forEach(link => {
  link.addEventListener('click', () => {
    navMenu.classList.remove('active');
    hamburgerBtn.classList.remove('active');
  });
});

核心逻辑说明 #

1. 阈值控制：通过@media (max-width: 768px)设置窄屏触发条件，你可以修改这个数值适配不同设备。
2. 菜单隐藏机制：宽屏时水平菜单正常显示；窄屏时菜单默认左移超出可视区域，点击汉堡按钮时通过添加active类将菜单拉回。
3. 汉堡按钮交互：默认显示三线，点击后通过CSS动画转为叉号，提升用户体验。
4. 布局兼容：导航栏设置position: relative，确保下拉菜单不会脱离页面布局。

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