相信小伙伴们在浏览绿叶网或其他官网时都会发现：在电脑上，导航链接是水平排开的；而到了手机上，链接会消失，取而代之的是一个 “汉堡按钮”。在这一节中，我们将手把手教大家如何实现这种企业级的响应式导航。
Tailwind CSS 响应式导航原理
在 Tailwind CSS 中，我们主要利用 Flex 布局 配合 “断点前缀（md:）” 来实现响应式导航。其中，一般需要遵循以下逻辑：
1. 移动端布局（默认状态）
- 显示 LOGO 和一个 “菜单按钮”。
- 导航链接列表默认设置为 hidden（隐藏）。
2. 桌面端布局（md: 触发）
- 隐藏 “菜单按钮”：使用 md:hidden。
- 显示导航链接列表：使用 md:flex（将隐藏状态覆盖为弹性布局）。
Tailwind CSS 响应式导航示例
接下来，我们通过一个简单的例子来讲解一下如何使用 Tailwind CSS 来实现响应式导航。
示例：响应式导航
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body class="bg-green-50 min-h-screen">
<nav class="fixed top-0 left-0 z-50 flex w-full items-center justify-between px-6 py-4 bg-white/80 border-b border-emerald-100 shadow-sm backdrop-blur-md">
<div class="text-2xl font-black text-emerald-600 cursor-pointer">
绿叶网
</div>
<div class="hidden md:flex items-center space-x-8 text-emerald-900 font-bold">
<a href="#" class="hover:text-emerald-500 transition-colors">教程</a>
<a href="#" class="hover:text-emerald-500 transition-colors">手册</a>
<a href="#" class="hover:text-emerald-500 transition-colors">课程</a>
<button class="px-5 py-2 bg-emerald-500 text-white rounded-full hover:bg-emerald-600 transition-all cursor-pointer">
开始学习
</button>
</div>
<button id="menu-btn" class="flex md:hidden items-center justify-center w-10 h-10 text-emerald-600 bg-emerald-50 rounded-lg cursor-pointer">
<svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16m-7 6h7"></path>
</svg>
</button>
<div id="mobile-menu" class="hidden md:hidden absolute top-full left-0 w-full p-6 bg-white border-b border-emerald-100 shadow-xl flex-col space-y-4">
<a href="#" class="text-lg font-bold text-emerald-900">教程</a>
<a href="#" class="text-lg font-bold text-emerald-900">手册</a>
<a href="#" class="text-lg font-bold text-emerald-900">课程</a>
<hr class="border-emerald-50">
<button class="w-full py-3 bg-emerald-500 text-white font-bold rounded-xl">立即登录</button>
</div>
</nav>
<script>
const btn = document.getElementById("menu-btn");
const menu = document.getElementById("mobile-menu");
btn.addEventListener("click", () => {
// 简单的显隐切换逻辑
menu.classList.toggle("hidden");
menu.classList.toggle("flex");
});
</script>
</body>
</html>当浏览器窗口比较大时，页面效果如下图 1 所示。当浏览器窗口比较小时，页面效果如下图 2 所示。
分析：
在这个例子中，我们使用了几个非常关键的技巧：
- 响应式切换（md:）：桌面端链接列表使用了 hidden md:flex，意味着它默认是隐藏的，只有当屏幕宽度达到 768px 时才以 Flex 布局展示。相反，菜单按钮使用了 md:hidden，在电脑端会自动消失。
- 定位与层次：导航栏使用了 fixed top-0 z-50。这样可以保证无论用户如何滚动页面，导航栏始终固定在最顶部，且不会被其他内容遮挡。
- 视觉细节：我们加入了 bg-white/80 和 backdrop-blur-md。这种半透明毛玻璃质感是现代高级 UI 的标配，能极大地提升绿叶网的品牌高级感。
常见问题
1. 在手机端中，下拉菜单被下方内容遮挡了怎么办呢？
小伙伴们可以仔细观察上面例子，我们在手机菜单上使用了 absolute top-full，这样可以使得菜单绝对定位，并紧紧贴着导航栏的底部展开。
同时我们还给外层导航栏设置了极高的层级（如 z-50），这样就能确保它始终浮在所有页面内容之上。在实际开发中，我们千万不要漏掉这两个关键类名！
2. 不使用 JavaScript 也可以实现菜单切换吗？
可以的。我们可以通过使用 HTML 的 <input type="checkbox"> 配合 Tailwind 的 peer 修饰符，来实现纯 CSS 的菜单切换。
但在实际企业级开发中，为了更好的交互反馈（比如点击页面其他空白区域自动关闭菜单），通常还是推荐使用类似上面那样的 JavaScript。
