Foundation通过Top Bar和Menu组件实现响应式导航，Top Bar在小屏自动折叠为汉堡菜单，配合data-topbar属性实现展开收起；Menu组件结合vertical与medium-horizontal类实现移动端垂直、中等屏幕横向布局，支持自定义断点、图标及Sticky固定，需引入foundation.js并初始化，快速构建多设备兼容的导航结构。
Foundation 是一个强大的前端框架，特别适合构建响应式网站。它的菜单组件（Menu）和顶级导航栏（Top Bar）能快速实现适应手机、平板和桌面的响应式导航结构。通过简单的 HTML 结构结合 Foundation 提供的类名与 JavaScript 功能，就能轻松完成适配多设备的导航栏。
使用 Top Bar 构建响应式导航
Foundation 的 Top Bar 组件专为响应式导航设计，在小屏幕上自动折叠为汉堡菜单（hamburger menu），点击后展开导航项。
基本结构如下：
<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<li class="name"><h1><a href="#">网站标题</a></h1></li>
<li class="toggle-topbar menu-icon"><a href="#"><span>菜单</span></a></li>
</ul>
<section class="top-bar-section">
<ul class="right">
<li><a href="#home">首页</a></li>
<li><a href="#about">关于</a></li>
<li><a href="#contact">联系</a></li>
</ul>
</section>
</nav>
只需添加 data-topbar 属性，Foundation 的 JavaScript 会自动处理折叠与展开行为。在移动端，用户点击“菜单”按钮即可看到导航链接。
使用 Menu 组件简化横向导航
如果你不需要复杂的 Top Bar，可以使用更轻量的 Menu 组件配合网格系统实现简洁响应式导航。
立即学习“前端免费学习笔记（深入）”；
示例代码：
<div class="row">
<div class="columns small-12">
<ul class="menu vertical medium-horizontal">
<li><a href="#home">首页</a></li>
<li><a href="#services">服务</a></li>
<li><a href="#portfolio">作品集</a></li>
<li><a href="#blog">博客</a></li>
</ul>
</div>
</div>
vertical 表示在小屏幕垂直排列，medium-horizontal 在中等及以上屏幕变为横向布局。这种写法语义清晰，适配灵活。
自定义响应点与图标增强体验
你可以通过 Sass 变量修改断点，或加入图标提升视觉效果。
- 使用
<i>标签或 SVG 插入图标，如 Font Awesome 图标：<i class="fa fa-home"></i> 首页 - 通过自定义 CSS 控制菜单在不同分辨率下的显示方式
- 启用 Sticky 功能让导航栏随页面滚动固定在顶部
确保引入了 foundation.js 并执行 $(document).foundation(); 初始化组件功能。
基本上就这些。利用 Foundation 提供的响应式工具，无需从零造轮子，几分钟内就能搭建出专业且兼容多端的导航系统。关键在于理解其类名逻辑与断点机制，合理组合使用组件。
