Foundation 响应式导航通过 .title-bar 与 .top-bar 结合 data-responsive-toggle 实现，需设置 data-hide-for 控制显示断点，配合 JavaScript 初始化组件，确保移动端折叠与桌面端常规布局自动切换。
Foundation 的响应式导航设置主要依赖于其内置的 Top Bar 或更现代的 Responsive Navigation 组件（在 Foundation for Sites 6 中推荐使用 Menu 和 Title Bar 搭配 JavaScript 插件）。下面以 Foundation 6/6+ 版本为例，介绍如何快速搭建一个响应式导航栏。
1. 基础 HTML 结构
使用 .menu 类配合 .title-bar 和 .top-bar 实现移动端优先的响应式导航：
<div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="medium">
<button class="menu-icon" type="button" data-toggle></button>
<div class="title-bar-title">Menu</div>
</div>
<div class="top-bar" id="example-menu">
<div class="top-bar-left">
<ul class="dropdown menu" data-dropdown-menu>
<li class="menu-text">Site Title</li>
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
</ul>
</div>
<div class="top-bar-right">
<ul class="menu">
<li><input type="search" placeholder="Search"></li>
<li><button type="button" class="button">Search</button></li>
</ul>
</div>
</div>
2. 关键属性说明
上述结构中几个关键点：
- data-responsive-toggle：指定要切换的目标导航容器 ID
- data-hide-for="medium"：表示该标题栏只在小于 medium 屏幕时显示
- data-toggle：触发菜单展开/收起
- data-dropdown-menu：启用下拉菜单功能（需引入 JS）
3. 引入必要的 JavaScript
确保页面加载了 Foundation 的 JS 文件，并初始化响应式菜单：
立即学习“前端免费学习笔记（深入）”；
<script src="js/vendor/jquery.js"></script> <script src="js/vendor/what-input.js"></script> <script src="js/vendor/foundation.js"></script> <script> $(document).foundation(); </script>
调用 $(document).foundation() 会自动激活所有支持的组件，包括响应式导航和下拉菜单。
4. 自定义断点与样式
如果你希望修改响应式断点，可以在 SCSS 中调整：
$breakpoints: ( small: 0, medium: 640px, large: 1024px );
然后通过 data-show-for 或 data-hide-for 控制元素在不同屏幕下的显示行为。
基本上就这些。只要结构正确、JS 初始化完成，Foundation 会自动处理移动设备上的折叠与展开交互。不复杂但容易忽略的是确保 JS 加载且调用了 foundation() 方法。
