顶栏

新的顶栏是我们灵活的菜单组件周围更简单的包装器。

基础知识

顶栏 (.top-bar) 可以有两个部分：左侧部分 (.top-bar-left) 和右侧部分 (.top-bar-right)。在小屏幕上，这些部分相互堆叠。

在下面的示例中，我们的顶栏包括一个下拉菜单，以及一个文本输入字段和一个操作按钮。下拉菜单继承了顶栏的背景颜色。如果您使用的是 Sass 版本的 Foundation，则可以使用 $topbar-submenu-background 变量更改此设置。

观看视频中的这部分

<div class="top-bar">
  <div class="top-bar-left">
    <ul class="dropdown menu" data-dropdown-menu>
      <li class="menu-text">Site Title</li>
      <li>
        <a href="#">One</a>
        <ul class="menu vertical">
          <li><a href="#">One</a></li>
          <li><a href="#">Two</a></li>
          <li><a href="#">Three</a></li>
        </ul>
      </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>

Foundation 5 顶栏的功能仍然存在，但它们已被重新设计成更小、独立的插件。查看我们关于响应式导航的页面以了解更多信息。

高级布局

要使用移动设备上的切换点击触发器设置响应式菜单，首先为您的菜单指定一个唯一的 ID。接下来，添加一个具有 .title-bar 类和 data-responsive-toggle 属性的标题栏。 data-responsive-toggle 的值应该是您要切换的菜单的 ID。最后，将 data-toggle 添加到将触发切换的元素。 data-toggle 的值也应该是您要切换的菜单的 ID。

默认情况下，标题栏在小屏幕上可见，而菜单隐藏。在中等断点处，标题栏消失，菜单始终可见。可以使用 HTML 中的 data-hide-for 属性或 JavaScript 中的 hideFor 设置来更改此断点。

<div class="title-bar" data-responsive-toggle="responsive-menu" data-hide-for="medium">
  <button class="menu-icon" type="button" data-toggle="responsive-menu"></button>
  <div class="title-bar-title">Menu</div>
</div>

<div class="top-bar" id="responsive-menu">
  <div class="top-bar-left">
    <ul class="dropdown menu" data-dropdown-menu>
      <li class="menu-text">Site Title</li>
      <li class="has-submenu">
        <a href="#0">One</a>
        <ul class="submenu menu vertical" data-submenu>
          <li><a href="#0">One</a></li>
          <li><a href="#0">Two</a></li>
          <li><a href="#0">Three</a></li>
        </ul>
      </li>
      <li><a href="#0">Two</a></li>
      <li><a href="#0">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>

菜单

堆叠

默认情况下，顶栏的两个部分将在小屏幕上相互堆叠。可以通过添加类 .stacked-for-medium 或 .stacked-for-large 来更改此设置。

<div class="top-bar stacked-for-medium">
  <!-- ... -->
</div>

请参阅 Sticky 插件的文档，了解如何轻松制作粘性导航栏。

Sass 参考

变量

可以使用项目设置文件中的以下 Sass 变量来自定义此组件的默认样式。

名称	类型	默认值	描述
`$topbar-padding`	数字	`0.5rem`	顶栏的填充。
`$topbar-background`	颜色	`$light-gray`	顶栏的背景颜色。此颜色还会级联到顶栏内的菜单。
`$topbar-submenu-background`	颜色	`$topbar-background`	顶栏内子菜单的背景颜色。如果 $topbar-background 是透明的，则很有用。
`$topbar-title-spacing`	数字	`0.5rem 1rem 0.5rem 0`	顶栏标题的间距。
`$topbar-input-width`	数字	`200px`	顶栏内 `<input>` 元素的最大宽度。
`$topbar-unstack-breakpoint`	断点	`medium`	顶栏从移动视图切换到桌面视图的断点。

混入

我们使用这些混入来构建此组件的最终 CSS 输出。您可以自己使用混入来从我们的组件中构建自己的类结构。

top-bar-container

@include top-bar-container;

为顶栏容器添加样式。

top-bar-stacked

@include top-bar-stacked;

使顶栏的部分相互堆叠。

top-bar-unstack

@include top-bar-unstack;

撤消 top-bar-stacked() 混入应用的 CSS。