Foundation 顶部导航栏（Top Bar）详解（超级完整版，一次讲透）
我们继续你的 Foundation 系列，今天把 顶部导航栏（Top Bar）讲得透透的！这是 Foundation 6+ 中最经典的响应式导航组件，大屏显示完整菜单，小屏自动变成汉堡菜单（Title Bar），完美支持 logo、下拉菜单、搜索框、右对齐项等。
1. 基本结构（最常用）
<div class="top-bar">
<div class="top-bar-left">
<ul class="menu">
<li class="menu-text">网站标题</li> <!-- Logo 或标题 -->
<li><a href="#">首页</a></li>
<li><a href="#">产品</a></li>
</ul>
</div>
<div class="top-bar-right">
<ul class="menu">
<li><a href="#">关于</a></li>
<li><a href="#">登录</a></li>
</ul>
</div>
</div>2. 带下拉菜单 + Logo
结合 Dropdown Menu：
<div class="top-bar">
<div class="top-bar-left">
<ul class="dropdown menu" data-dropdown-menu>
<li class="menu-text"><img src="logo.png" alt="Logo" style="height:30px;"></li>
<li><a href="#">首页</a></li>
<li>
<a href="#">产品中心</a>
<ul class="menu vertical">
<li><a href="#">产品A</a></li>
<li><a href="#">产品B</a></li>
</ul>
</li>
<li><a href="#">博客</a></li>
</ul>
</div>
<div class="top-bar-right">
<ul class="menu">
<li><input type="search" placeholder="搜索..."></li>
<li><button type="button" class="button">搜索</button></li>
</ul>
</div>
</div>3. 响应式汉堡菜单（自动处理，无需额外代码）
小屏时自动出现汉堡图标，点击展开菜单（Title Bar 模式）。
4. 今天直接给你抄的完整代码（复制就能跑）
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.8.1/dist/css/foundation.min.css">
<style>
.top-bar { background: #333; }
.top-bar a, .top-bar .menu-text { color: white; }
.top-bar .button { background: #1779ba; }
</style>
</head>
<body>
<div class="top-bar">
<div class="top-bar-left">
<ul class="dropdown menu" data-dropdown-menu>
<li class="menu-text">MySite</li>
<li><a href="#">首页</a></li>
<li>
<a href="#">产品</a>
<ul class="menu vertical">
<li><a href="#">产品1</a></li>
<li><a href="#">产品2</a></li>
<li><a href="#">产品3</a></li>
</ul>
</li>
<li><a href="#">关于我们</a></li>
</ul>
</div>
<div class="top-bar-right">
<ul class="menu">
<li><input type="search" placeholder="搜索"></li>
<li><button type="button" class="button">Go</button></li>
<li><a href="#">登录</a></li>
</ul>
</div>
</div>
<div style="height:500px; padding:20px;">
<h3>内容区域（试试缩小浏览器看汉堡菜单）</h3>
<p>Top Bar 自动响应式，太强大了！</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.8.1/dist/js/foundation.min.js"></script>
<script>$(document).foundation();</script>
</body>
</html>下面给你看真实效果（官方和项目中最标准的 Foundation Top Bar 示例）：
官方文档（最新版）：https://get.foundation/sites/docs/top-bar.html
你现在想干嘛？
→ 明天继续讲 Foundation 表格（Table）还是面包屑（Breadcrumbs）？
→ 帮我做一个固定顶部（sticky）+ 带图标的 Top Bar？
→ 给我一个暗黑模式 + 右侧用户下拉菜单的完整导航？
直接回复下一句：
“明天讲 table”
“帮我做 sticky Top Bar”
“给我暗黑用户菜单”
我立刻给你写好！
