如何实现全屏媒体查询下显示完整导航栏，手机宽度下切换为汉堡菜单？

核心逻辑 #

通过CSS媒体查询区分屏幕宽度，配合JavaScript控制汉堡菜单的展开/收起，实现大屏展示完整导航、小屏切换为汉堡菜单的效果。

具体实现步骤 #

1. 搭建HTML结构 #

包含品牌标识、汉堡按钮（小屏显示）、完整导航菜单（大屏显示）：

<nav class="navbar">
  <div class="nav-brand">你的品牌名称</div>
  <!-- 汉堡触发按钮 -->
  <button class="hamburger" id="hamburgerBtn">☰</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>
  </ul>
</nav>

2. 编写CSS样式 #

• 先定义基础导航布局，再通过媒体查询适配不同屏幕：

/* 基础导航样式 */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background-color: #2c3e50;
  color: #fff;
}

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

.nav-menu a {
  color: #fff;
  text-decoration: none;
  transition: color 0.2s;
}

.nav-menu a:hover {
  color: #3498db;
}

/* 汉堡按钮默认隐藏（大屏状态） */
.hamburger {
  display: none;
  background: none;
  border: none;
  color: #fff;
  font-size: 1.5rem;
  cursor: pointer;
}

/* 手机宽度适配（以768px为阈值，可按需调整） */
@media (max-width: 768px) {
  /* 隐藏默认菜单，改为垂直布局 */
  .nav-menu {
    position: absolute;
    top: 60px; /* 与导航栏高度匹配 */
    left: 0;
    width: 100%;
    background-color: #2c3e50;
    flex-direction: column;
    padding: 1rem;
    display: none; /* 默认收起 */
  }

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

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

3. 添加JavaScript交互 #

实现汉堡按钮点击切换菜单显示/隐藏：

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

hamburgerBtn.addEventListener('click', () => {
  navMenu.classList.toggle('active');
});

可选优化点 #

• 给菜单添加transition: all 0.3s ease;，让展开/收起有平滑过渡动画
• 点击导航菜单选项后自动收起汉堡菜单（手机端体验更友好）
• 监听屏幕尺寸变化，切换到大屏时强制收起菜单，避免状态混乱

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