在 Foundation 中，顶部导航栏（Top Bar） 是一种常用的布局方式，用于创建网站的主要导航菜单。顶部导航栏通常位于页面的顶部，提供快速链接到不同的页面或部分，能够适应不同的设备和屏幕尺寸（响应式设计）。

1. 基础顶部导航栏

一个简单的顶部导航栏可以通过 top-bar 类来创建。你可以使用 ul 和 li 标签来创建菜单项，a 标签用于链接到页面的其他部分。

<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>
      <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：表示顶部导航栏容器。
  • top-bar-left：用于放置导航栏的左侧菜单项（例如公司名和主要页面链接）。
  • top-bar-right：用于放置导航栏的右侧菜单项（例如登录和注册链接）。

2. 响应式顶部导航栏

Foundation 的顶部导航栏是响应式的，当屏幕尺寸较小时，导航菜单会自动折叠，并提供一个汉堡菜单（hamburger menu）来展开导航项。

<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>
      <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>

通过这种结构，当浏览器窗口缩小时，Foundation 会自动将菜单项转换为一个折叠的汉堡菜单。

3. 启用汉堡菜单

为了启用折叠菜单功能，Foundation 的顶部导航栏需要包括 data-toggle 属性来指定按钮点击后展开的菜单。

<div class="top-bar" data-responsive-toggle="example-menu" data-hide-for="medium">
  <div class="top-bar-left">
    <ul class="menu">
      <li class="menu-text">公司名</li>
      <li><a href="#">首页</a></li>
      <li><a href="#">产品</a></li>
      <li><a href="#">关于我们</a></li>
    </ul>
  </div>
  <div class="top-bar-right">
    <button class="menu-icon" type="button" data-toggle="example-menu"></button>
  </div>
</div>
<ul class="menu" id="example-menu">
  <li><a href="#">登录</a></li>
  <li><a href="#">注册</a></li>
</ul>
  • data-responsive-toggle="example-menu"：指定了要展开的菜单区域。
  • menu-icon：此按钮会在小屏幕下显示为一个汉堡菜单图标，点击后显示菜单项。

4. 下拉菜单

如果需要在导航栏中添加下拉菜单，可以使用 dropdown 类来实现。下拉菜单通常用于将菜单项分组，以节省空间。

<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>
      <li class="has-dropdown">
        <a href="#">更多</a>
        <ul class="dropdown">
          <li><a href="#">联系我们</a></li>
          <li><a href="#">支持</a></li>
        </ul>
      </li>
    </ul>
  </div>
  <div class="top-bar-right">
    <ul class="menu">
      <li><a href="#">登录</a></li>
    </ul>
  </div>
</div>
  • has-dropdown：添加到有下拉菜单的菜单项上。
  • dropdown：下拉菜单容器，包含要显示的子项。

5. 自定义样式

你可以自定义顶部导航栏的样式，例如改变背景颜色、字体大小、菜单项的颜色等。以下是一个自定义样式的示例：

<div class="top-bar custom-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>
      <li><a href="#">关于我们</a></li>
    </ul>
  </div>
  <div class="top-bar-right">
    <ul class="menu">
      <li><a href="#">登录</a></li>
    </ul>
  </div>
</div>

<style>
  .custom-top-bar {
    background-color: #333;
    color: white;
  }
  .custom-top-bar .menu a {
    color: white;
  }
  .custom-top-bar .menu a:hover {
    color: #4caf50;
  }
</style>

在这个例子中，我们使用了 自定义背景色、字体颜色 以及 鼠标悬停效果 来修改顶部导航栏的外观。

6. 使导航栏固定在顶部

如果你希望导航栏在滚动时始终固定在页面顶部，可以使用 sticky 类。这样导航栏就会固定在视口顶部，而不会随着页面滚动而消失。

<div class="top-bar sticky" data-sticky>
  <div class="top-bar-left">
    <ul class="menu">
      <li class="menu-text">公司名</li>
      <li><a href="#">首页</a></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>
    </ul>
  </div>
</div>

在这个例子中，sticky 类和 data-sticky 属性使得导航栏在页面滚动时始终固定在顶部。

7. 总结

Foundation 顶部导航栏 是一个灵活且强大的组件，能够帮助你轻松构建响应式的、功能丰富的导航菜单。它支持下拉菜单、响应式设计、固定顶部等功能，并且可以通过自定义样式来满足特定的设计需求。

  • 响应式设计：导航栏会自动适应不同屏幕尺寸，支持折叠为汉堡菜单。
  • 下拉菜单：方便将菜单项分组，节省空间。
  • 自定义样式：通过 CSS 改变背景色、文字颜色、悬停效果等。
  • 固定顶部：使用 sticky 类使导航栏在滚动时固定在顶部。

如果你有任何问题，或者需要更深入的帮助，随时告诉我！