实现响应式Mega Menu：优化移动端汉堡菜单布局

1. 调整HTML结构 #

给菜单容器增加独立包裹层，区分汉堡按钮和菜单内容，方便控制滑出逻辑：

<!-- 导航栏容器 -->
<header class="flex items-center justify-between p-4 bg-gray-800 text-white">
  <!-- 品牌/logo -->
  <div class="text-xl font-bold">My Site</div>
  
  <!-- 汉堡按钮（仅移动端显示） -->
  <button id="burgerBtn" class="md:hidden text-2xl">☰</button>
  
  <!-- 移动端滑出菜单 -->
  <nav id="mobileMenu" class="fixed top-0 right-0 h-full w-64 bg-gray-900 transform translate-x-full transition-transform duration-300 ease-in-out z-50">
    <!-- 关闭按钮 -->
    <button id="closeBtn" class="p-4 text-right text-2xl">&times;</button>
    
    <!-- 垂直堆叠的菜单项 -->
    <ul class="flex flex-col p-4 space-y-6">
      <li><a href="#" class="hover:text-gray-300">首页</a></li>
      <li><a href="#" class="hover:text-gray-300">关于我们</a></li>
      <li><a href="#" class="hover:text-gray-300">服务</a></li>
      <li><a href="#" class="hover:text-gray-300">联系我们</a></li>
    </ul>
  </nav>
  
  <!-- 桌面端横向菜单（仅大屏显示） -->
  <nav class="hidden md:flex space-x-6">
    <a href="#" class="hover:text-gray-300">首页</a>
    <a href="#" class="hover:text-gray-300">关于我们</a>
    <a href="#" class="hover:text-gray-300">服务</a>
    <a href="#" class="hover:text-gray-300">联系我们</a>
  </nav>
</header>

2. Tailwind 样式核心配置 #

关键样式说明：

• fixed top-0 right-0 h-full w-64：将移动端菜单固定在右侧，占满屏幕高度
• transform translate-x-full：默认让菜单完全移出视口右侧，transition-transform 实现平滑滑出动画
• flex flex-col space-y-6：强制菜单项垂直堆叠并保持均匀间距
• md:hidden / hidden md:flex：通过响应式类区分移动端和桌面端元素的显示状态

如果需要左侧滑出，只需把 right-0 改为 left-0，translate-x-full 改为 -translate-x-full。

3. JavaScript 交互逻辑 #

控制菜单的显示/隐藏，通过添加/移除类触发动画：

const burgerBtn = document.getElementById('burgerBtn');
const closeBtn = document.getElementById('closeBtn');
const mobileMenu = document.getElementById('mobileMenu');

// 打开菜单
burgerBtn.addEventListener('click', () => {
  mobileMenu.classList.remove('translate-x-full');
});

// 关闭菜单
closeBtn.addEventListener('click', () => {
  mobileMenu.classList.add('translate-x-full');
});

// 点击菜单外部自动关闭（可选优化）
document.addEventListener('click', (e) => {
  if (!mobileMenu.contains(e.target) && !burgerBtn.contains(e.target)) {
    mobileMenu.classList.add('translate-x-full');
  }
});

额外优化建议 #

• 添加全屏遮罩：在菜单容器外增加半透明全屏遮罩层，默认隐藏，打开菜单时显示，增强视觉层次感
• 扩大点击区域：给菜单项的 <a> 标签添加 block p-2 类，提升移动端点击体验
• 锁定页面滚动：打开菜单时给 <body> 添加 overflow-hidden 类，防止页面滚动干扰

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