园林绿化公司哪家好,2025小区绿化苗木，园林绿化树苗批发，绿化园林景观，浙江苗木绿化，绿化苗木批发公司选择指南 - 栗子测评
2025/12/20 1:27:23
Foundation 顶部导航栏（Top Bar）详解（超级完整版，一次讲透）
我们继续你的 Foundation 系列，今天把顶部导航栏（Top Bar）讲得透透的！这是 Foundation 6+ 中最经典的响应式导航组件，大屏显示完整菜单，小屏自动变成汉堡菜单（Title Bar），完美支持 logo、下拉菜单、搜索框、右对齐项等。
1. 基本结构（最常用）
<divclass="top-bar"><divclass="top-bar-left"><ulclass="menu"><liclass="menu-text">网站标题</li><!-- Logo 或标题 --><li><ahref="#">首页</a></li><li><ahref="#">产品</a></li></ul></div><divclass="top-bar-right"><ulclass="menu"><li><ahref="#">关于</a></li><li><ahref="#">登录</a></li></ul></div></div>2. 带下拉菜单 + Logo
结合 Dropdown Menu：
<divclass="top-bar"><divclass="top-bar-left"><ulclass="dropdown menu"data-dropdown-menu><liclass="menu-text"><imgsrc="logo.png"alt="Logo"style="height:30px;"></li><li><ahref="#">首页</a></li><li><ahref="#">产品中心</a><ulclass="menu vertical"><li><ahref="#">产品A</a></li><li><ahref="#">产品B</a></li></ul></li><li><ahref="#">博客</a></li></ul></div><divclass="top-bar-right"><ulclass="menu"><li><inputtype="search"placeholder="搜索..."></li><li><buttontype="button"class="button">搜索</button></li></ul></div></div>3. 响应式汉堡菜单（自动处理，无需额外代码）
小屏时自动出现汉堡图标，点击展开菜单（Title Bar 模式）。
4. 今天直接给你抄的完整代码（复制就能跑）
<!DOCTYPEhtml><html><head><linkrel="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><divclass="top-bar"><divclass="top-bar-left"><ulclass="dropdown menu"data-dropdown-menu><liclass="menu-text">MySite</li><li><ahref="#">首页</a></li><li><ahref="#">产品</a><ulclass="menu vertical"><li><ahref="#">产品1</a></li><li><ahref="#">产品2</a></li><li><ahref="#">产品3</a></li></ul></li><li><ahref="#">关于我们</a></li></ul></div><divclass="top-bar-right"><ulclass="menu"><li><inputtype="search"placeholder="搜索"></li><li><buttontype="button"class="button">Go</button></li><li><ahref="#">登录</a></li></ul></div></div><divstyle="height:500px;padding:20px;"><h3>内容区域（试试缩小浏览器看汉堡菜单）</h3><p>Top Bar 自动响应式，太强大了！</p></div><scriptsrc="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script><scriptsrc="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”
“给我暗黑用户菜单”
我立刻给你写好！