Foundation导航栏制作详解

想要快速构建响应式网站？本教程将手把手教你使用 Foundation 框架轻松制作导航栏！Foundation 是一款强大的前端框架，其内置的灵活菜单组件能完美适配桌面端和移动端。本文将详细讲解如何引入 Foundation CSS 和 JS 文件，利用 `.top-bar` 类创建基础导航栏，实现左右分区布局，并结合 `data-responsive-toggle` 属性，打造移动端友好的汉堡菜单切换效果。通过学习本教程，你将掌握 Foundation 导航栏的核心技巧，快速提升你的网站用户体验，让你的网站在各种设备上都能完美呈现！

Foundation导航栏通过引入CSS和JS文件，使用.top-bar构建响应式菜单，结合data-responsive-toggle实现移动端汉堡按钮切换，支持左右分区布局与下拉菜单，适配多设备显示。

Foundation 是一个强大的前端框架，适合快速构建响应式网站。使用 Foundation 制作导航栏非常方便，它内置了灵活的菜单组件，能轻松实现桌面端和移动端的适配。

引入 Foundation 基础文件

要使用 Foundation 的导航功能，先确保项目中已正确引入其 CSS 和 JS 文件。可以通过 CDN 快速加载：

示例代码：

<!-- 引入 Foundation CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/css/foundation.min.css">
<p><!-- 引入 jQuery -->
<script src="<a target='_blank'  href='https://www.17golang.com/gourl/?redirect=MDAwMDAwMDAwML57hpSHp6VpkrqbYLx2eayza4KafaOkbLS3zqSBrJvPsa5_0Ia6sWuR4Juaq6t9nq5roGCUgXuytMyero1kcNC-h2bVm7u6pZvUm6W7ZGmosWuoqJSQj7HKtpaygJyQ2rF3ZtiZupiumdR9nK-ceaG-kGmnf2udaLTcwKCWinicxnyCm4SWsqOb05ynxnWKnMeReWeKbIqirtyzon1kidGyeJjbhqq5boatgamvhpSdvrOBZX99pGy_t7NrjayE376Ih86G0LFu' rel='nofollow'>https://code.jquery.com/jquery-3.6.0.min.js"&gt;&lt;/script&gt</a>;</p><p><!-- 引入 Foundation JS -->
<script src="<a target='_blank'  href='https://www.17golang.com/gourl/?redirect=MDAwMDAwMDAwML57hpSHp6VpkrqbYLx2eayza4KafaOkbLS3zqSBrJvPsa5_0Ia6sWuR4Juaq6t9nq5roGCUgXuytMyero1kidqwoaHekqq6rJm-iqmun2WgyXxxpZOAaa6_0J9plp-Jzch7ndqazJWzmb6CnMVicWaxo5ulfoxyo8a7tGiAZKffsGaL2py6maSRvoKgxGRkqceQpKV8pqmyr7evsX6ffdnHeKXSnKfXppG9YaexZKhktLJxqolsg6jIq7eljYlo3LNmlZSB3LGjgd9-m7yGgWiyfYqcf42Lo7LNq2uNn4Tes4iYmYequbOGmH2qr2SFZb6zkpp_inZ1' rel='nofollow'>https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/js/foundation.min.js"&gt;&lt;/script&gt</a>;
</p>

创建基础导航栏

使用 .top-bar 类构建 Foundation 的顶部导航栏。支持左右分区布局，适配响应式菜单。

结构示例：

<div class="top-bar">
  <div class="top-bar-left">
    <ul class="menu">
      <li class="menu-text">网站标题</li>
      <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>

说明：

• top-bar-left：放置品牌名称或主菜单项
• top-bar-right：常用于用户操作链接
• menu：定义横向菜单列表
• menu-text：非点击的文字标识（如站点名）

添加响应式下拉菜单

为移动端优化，可结合 JavaScript 实现汉堡菜单切换。

修改结构以支持响应式：

<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">菜单</div>
</div>
<p><div id="example-menu">
<div class="top-bar">
<div class="top-bar-left">
<ul class="menu">
<li class="menu-text">我的网站</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>
</div>
</p>

关键属性解释：

• data-responsive-toggle：绑定响应式控制的目标元素
• data-hide-for="medium"：在中等及以上屏幕隐藏标题栏按钮
• data-toggle：触发菜单展开/收起

确保在页面加载后初始化 Foundation：

<script>
  $(document).foundation();
</script>

这样就能实现自动适配不同设备的导航栏，小屏幕显示汉堡图标，点击展开菜单；大屏幕则显示完整水平导航。

基本上就这些。Foundation 的导航系统简洁高效，配合其网格系统和组件库，能快速搭建专业级响应式页面。

到这里，我们也就讲完了《Foundation导航栏制作详解》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！