如何实现响应式汉堡菜单：移动端全宽垂直导航与正确显示逻辑-js教程-PHP中文网

如何实现响应式汉堡菜单：移动端全宽垂直导航与正确显示逻辑

本文详解如何让汉堡菜单仅在 768px 及以下屏幕显示，并使导航项垂直堆叠、占满容器宽度，同时修复下拉菜单错位与布局拥挤问题。

本文详解如何让汉堡菜单仅在 768px 及以下屏幕显示，并使导航项垂直堆叠、占满容器宽度，同时修复下拉菜单错位与布局拥挤问题。

实现一个真正可用的响应式汉堡菜单，关键在于结构隔离、媒体查询精准控制、JavaScript 行为与 CSS 状态严格同步。原代码中存在几个核心问题：汉堡按钮默认始终显示（未隐藏于桌面端）、.navigation ul 在移动端未脱离行内布局约束、下拉菜单（.dropdown-content）在折叠状态下仍可能影响流式布局，且缺少重置默认边距导致视觉偏移。

以下是优化后的完整实现方案：

✅ 正确的 HTML 结构（保持语义化）

<header><button class="hamburger" aria-label="Toggle navigation">☰</button>
  <nav class="navigation"><ul>
<li class="dropdown">
        <a href="#" class="dropBtn">Stomping Ground <i class="fa fa-caret-down"></i></a>
        <div class="dropdown-content">
          <a href="Intro.html">Intro</a>
          <a href="Meet.html">Meet the team</a>
          <a href="Roadmap.html">Roadmap</a>
        </div>
      </li>
      <li class="dropdown">
        <a href="#" class="dropBtn">Training <i class="fa fa-caret-down"></i></a>
        <div class="dropdown-content">
          <a href="How.html">How to play</a>
          <a href="Tokenomics.html">Tokenomics</a>
        </div>
      </li>
      <li><a href="M.html">Multiplayer</a></li>
      <li><a href="S.html">Single player</a></li>
      <li><a href="#"><i class="fab fa-telegram"></i></a></li>
      <li><a href="#"><i class="fab fa-twitter"></i></a></li>
      <li><a href="#"><i class="fab fa-discord"></i></a></li>
      <li><button class="btnLogin-popup">Login</button></li>
    </ul></nav></header>

✅ 健壮的 JavaScript（增强可访问性与兼容性）

document.addEventListener('DOMContentLoaded', () => {
  const hamburger = document.querySelector('.hamburger');
  const navMenu = document.querySelector('.navigation ul');

  if (!hamburger || !navMenu) return;

  hamburger.addEventListener('click', () => {
    navMenu.classList.toggle('active');
    // 同步 aria-expanded 属性，提升无障碍体验
    const expanded = navMenu.classList.contains('active');
    hamburger.setAttribute('aria-expanded', expanded);
  });

  // 点击菜单项后自动收起（移动端友好）
  navMenu.addEventListener('click', (e) => {
    if (e.target.tagName === 'A' || e.target.tagName === 'BUTTON') {
      navMenu.classList.remove('active');
      hamburger.setAttribute('aria-expanded', 'false');
    }
  });

  // 点击外部区域关闭菜单（可选增强）
  document.addEventListener('click', (e) => {
    if (navMenu.classList.contains('active') && 
        !e.target.closest('.hamburger') && 
        !e.target.closest('.navigation')) {
      navMenu.classList.remove('active');
      hamburger.setAttribute('aria-expanded', 'false');
    }
  });
});

✅ 精准的 CSS 响应式规则（含关键修复）

/* 全局重置（必加） */
body {
  margin: 0;
  padding: 0;
}

/* 桌面端：隐藏汉堡，显示完整导航 */
.hamburger {
  display: none; /* 默认隐藏 */
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  padding: 12px;
}

.navigation {
  display: flex;
  align-items: center;
}

.navigation ul {
  display: flex;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.navigation li {
  margin-left: 40px;
}

/* 移动端：768px 及以下 */
@media (max-width: 768px) {
  .hamburger {
    display: block; /* 仅在此断点显示 */
  }

  .navigation {
    width: 100%;
    background-color: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  }

  .navigation ul {
    display: none; /* 默认折叠 */
    flex-direction: column;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .navigation ul.active {
    display: flex; /* 点击后展开 */
  }

  .navigation li {
    margin: 0;
    width: 100%;
    text-align: center;
  }

  .navigation a,
  .navigation button {
    display: block;
    padding: 16px 0;
    text-decoration: none;
    color: #333;
    font-weight: 500;
  }

  /* 下拉菜单适配：绝对定位脱离文档流，避免撑开父容器 */
  .dropdown {
    position: relative;
  }

  .dropdown-content {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #f9f9f9;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    z-index: 1000;
    display: none;
  }

  .dropdown:hover .dropdown-content,
  .dropdown.active .dropdown-content {
    display: block;
  }

  /* 可选：小屏下图标尺寸微调 */
  .fab, .fa {
    font-size: 1.2em;
  }
}