Foundation 顶部导航栏
Foundation 顶部导航栏
概述
Foundation 是一个流行的前端框架，提供了各种用于网站开发的组件和工具包。其中，顶部导航栏是一个常用的组件，用于在网站的顶部提供导航菜单。
需求
在开发网站时，有时需要添加一个顶部导航栏来展示网站的主要导航菜单。要求导航栏能够：
- 显示网站的logo
- 提供导航链接（比如首页、关于我们、联系我们等）
- 在移动端时，能够以响应式方式自适应大小和展示方式
- 支持二级导航（下拉菜单）
实现
在 Foundation 中，顶部导航栏可以通过以下步骤实现：
Step1: 加载 Foundation CSS
在您的HTML文件中，引入Foundation CSS文件：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.6.3/css/foundation.min.css"/>
Step2: 创建 HTML 结构
在您的 HTML 文件中，创建一个具有 Foundation 类的 nav 元素并添加您的网站 logo 和导航链接。例如：
<nav class="top-bar">
<div class="top-bar-left">
<a href="#"><img src="logo.png"></a>
</div>
<div class="top-bar-right">
<ul class="menu">
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">联系我们</a></li>
<li class="has-submenu">
<a href="#">二级导航</a>
<ul class="submenu menu vertical" data-submenu>
<li><a href="#">子菜单1</a></li>
<li><a href="#">子菜单2</a></li>
<li><a href="#">子菜单3</a></li>
</ul>
</li>
</ul>
</div>
</nav>
在这个示例中，我们使用了一个 nav 元素作为导航栏的容器，并用了 Foundation 类 top-bar 来定义这是一个顶部导航栏。
top-bar-left 容器包含了您的网站标志。 top-bar-right 容器是导航链接的容器。
第一个 ul 元素定义了您的主要导航菜单链接。如果您需要添加一级或二级导航，只需在其中添加 li 元素。
最后，要添加二级菜单，您可以使用 has-submenu 类将元素标记为具有下拉菜单。 然后，您可以添加一个包含所有子菜单的 ul 元素。
Step3: 加载 Foundation JavaScript
在您的 HTML 文件中，引入 Foundation JavaScript 文件和 jQuery 文件：
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.6.3/js/foundation.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.6.3/js/plugins/foundation.dropdown.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.6.3/js/plugins/foundation.dropdownMenu.js"></script>
FAQ
Q: 如何创建一个固定的顶部导航栏？
A: 您可以使用以下CSS样式固定您的导航栏到页面的顶部：
.top-bar {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 9999;
}
Q: 如何在移动设备上隐藏顶部导航栏？
A: 您可以使用以下CSS样式仅在移动设备上隐藏导航栏：
@media only screen and (max-width: 640px) {
.top-bar {
display: none !important;
}
}
总结
Foundation 的顶部导航栏组件提供了一个易用、易定制的导航栏模板。通过简单的 HTML 和 CSS，您可以快速创建您网站的主要导航菜单，并在移动设备和桌面设备上实现一致的用户体验。