菜单

我们灵活的菜单组件可以轻松构建许多常见的导航模式，所有这些都使用相同的标记。

菜单是一个灵活的、通用的导航组件。它取代了 Foundation 5 中的内联列表、侧边导航、子导航和图标栏，将它们统一到一个组件中。

所有版本的菜单都是一个 <ul>，其中填充了包含链接的 <li> 元素。默认情况下，菜单是水平方向的。

<ul class="menu">
  <li><a href="#">One</a></li>
  <li><a href="#">Two</a></li>
  <li><a href="#">Three</a></li>
  <li><a href="#">Four</a></li>
</ul>

项目对齐

默认情况下，菜单中的每个项目都向左对齐。它们也可以使用 .align-right 类向右对齐。

在视频中观看此部分

在从右到左的环境中，项目默认向右对齐，可以使用 .align-left 类反转方向。

<ul class="menu align-right">
  <li><a href="#">One</a></li>
  <li><a href="#">Two</a></li>
  <li><a href="#">Three</a></li>
  <li><a href="#">Four</a></li>
</ul>

要将项目在中间对齐，请将 .align-center 添加到 .menu 类。

在视频中观看此部分

<ul class="menu align-center">
  <li><a href="#">One</a></li>
  <li><a href="#">Two</a></li>
  <li><a href="#">Three</a></li>
  <li><a href="#">Four</a></li>
</ul>

还可以将项目设置为扩展并占用相等的空格，使用 .expanded 类。由于 CSS 的魔力，这些项目将根据菜单中的项目数量自动调整大小。

在视频中观看此部分

<ul class="menu expanded">
  <li><a href="#">One</a></li>
  <li><a href="#">Two</a></li>
</ul>

将 .vertical 类添加到菜单以切换其方向。

在视频中观看此部分

<ul class="vertical menu">
  <li><a href="#">One</a></li>
  <li><a href="#">Two</a></li>
  <li><a href="#">Three</a></li>
  <li><a href="#">Four</a></li>
</ul>

添加 align-right 类以使垂直菜单向右对齐。

<ul class="vertical menu align-right">
  <li><a href="#">One</a></li>
  <li><a href="#">Two</a></li>
  <li><a href="#">Three</a></li>
  <li><a href="#">Four</a></li>
</ul>

添加 align-center 类以使垂直菜单居中对齐。

以上垂直左对齐和右对齐菜单在所有类型的菜单中都受支持。
但垂直菜单的 `align-center` 仅适用于基本菜单，不适用于下拉菜单、折叠菜单或下钻菜单。

<ul class="vertical menu align-center">
  <li><a href="#">One</a></li>
  <li><a href="#">Two</a></li>
  <li><a href="#">Three</a></li>
  <li><a href="#">Four</a></li>
</ul>

简单样式

将 .simple 类添加到菜单以删除填充和颜色更改。此样式模仿了 Foundation 5 中的内联列表。

在视频中观看此部分

<ul class="menu simple">
  <li>One</li>
  <li><a href="#">Two</a></li>
  <li><a href="#">Three</a></li>
  <li><a href="#">Four</a></li>
</ul>

嵌套样式

在菜单的 <li> 内添加一个新菜单，并添加 .nested 类以创建嵌套菜单。嵌套菜单的内部有额外的填充。

在视频中观看此部分

<ul class="vertical menu">
  <li>
    <a href="#">One</a>
    <ul class="nested vertical menu">
      <li><a href="#">One</a></li>
      <li><a href="#">Two</a></li>
      <li><a href="#">Three</a></li>
      <li><a href="#">Four</a></li>
    </ul>
  </li>
  <li><a href="#">Two</a></li>
  <li><a href="#">Three</a></li>
  <li><a href="#">Four</a></li>
</ul>

活动状态

将 .is-active 类添加到任何 <li> 以创建活动状态。您可以在服务器端应用此类以标记活动页面，也可以使用 JavaScript 动态应用。

在视频中观看此部分

<ul class="menu">
  <li class="is-active"><a>Home</a></li>
  <li><a>About</a></li>
  <li><a>Nachos</a></li>
</ul>

文本

因为菜单项的填充应用于 <a>，所以如果您尝试添加仅包含文本的项目，则该项目将错位。要解决此问题，请将 .menu-text 类添加到任何不包含链接的 <li> 中。

在视频中观看此部分

<ul class="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>

图标

菜单项可以包含图标。将项目的文本包装在 <span> 中，然后在 <span> 之前添加一个 <img> 元素。如果您使用的是 Foundation 图标字体，则 <img> 将是 <i>。

在视频中观看此部分

<ul class="menu">
  <li><a href="#"><i class="fi-list"></i> <span>One</span></a></li>
  <li><a href="#"><i class="fi-list"></i> <span>Two</span></a></li>
  <li><a href="#"><i class="fi-list"></i> <span>Three</span></a></li>
  <li><a href="#"><i class="fi-list"></i> <span>Four</span></a></li>
</ul>

将 .icons 类添加到父菜单容器以指定菜单包含图标。除此之外，还要添加您选择的布局类，例如 .icon-top。

使用任何菜单图标布局类时，请确保图标和文本的顺序正确。对于 .icon-right 和 .icon-bottom，图标必须位于文本之后。

在视频中观看此部分

图标顶部

<ul class="menu icons icon-top">
  <li><a href="#"><i class="fi-list"></i> <span>One</span></a></li>
  <li><a href="#"><i class="fi-list"></i> <span>Two</span></a></li>
  <li><a href="#"><i class="fi-list"></i> <span>Three</span></a></li>
  <li><a href="#"><i class="fi-list"></i> <span>Four</span></a></li>
</ul>

图标右侧

<ul class="menu icons icon-right">
  <li><a href="#"><span>One</span> <i class="fi-list"></i></a></li>
  <li><a href="#"><span>Two</span> <i class="fi-list"></i></a></li>
  <li><a href="#"><span>Three</span> <i class="fi-list"></i></a></li>
  <li><a href="#"><span>Four</span> <i class="fi-list"></i></a></li>
</ul>

图标底部

<ul class="menu icons icon-bottom">
  <li><a href="#"><span>One</span> <i class="fi-list"></i></a></li>
  <li><a href="#"><span>Two</span> <i class="fi-list"></i></a></li>
  <li><a href="#"><span>Three</span> <i class="fi-list"></i></a></li>
  <li><a href="#"><span>Four</span> <i class="fi-list"></i></a></li>
</ul>

图标左侧

<ul class="menu icons icon-left">
  <li><a href="#"><i class="fi-list"></i> <span>One</span></a></li>
  <li><a href="#"><i class="fi-list"></i> <span>Two</span></a></li>
  <li><a href="#"><i class="fi-list"></i> <span>Three</span></a></li>
  <li><a href="#"><i class="fi-list"></i> <span>Four</span></a></li>
</ul>

嵌套样式的图标位置

嵌套列表可以根据菜单层级以不同的方式放置图标。将 .nested 类添加到嵌套列表中，并添加您想要的图标位置：.icon-top、.icon-right、.icon-bottom、.icon-left。

<ul class="vertical menu icons icon-top">
  <li>
    <a href="#"><i class="fi-list"></i> One</a>
    <ul class="nested vertical menu icons icon-left">
      <li><a href="#"><i class="fi-list"></i> One</a></li>
      <li><a href="#"><i class="fi-list"></i> Two</a></li>
    </ul>
  </li>
  <li><a href="#"><i class="fi-list"></i> Two</a></li>
  <li><a href="#"><i class="fi-list"></i> Three</a></li>
</ul>

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

Sass 参考

变量

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

名称	类型	默认值	描述
`$menu-margin`	数字	`0`	菜单的外边距。
`$menu-nested-margin`	数字	`$global-menu-nested-margin`	嵌套菜单的左侧边距。
`$menu-items-padding`	数字	`$global-menu-padding`	药丸菜单中项目的填充。
`$menu-simple-margin`	数字	`1rem`	简单菜单中项目的边距。
`$menu-item-color-active`	颜色	`$white`	活动菜单项的文本颜色。
`$menu-item-color-alt-active`	颜色	`$black`	活动菜单项的替代文本颜色。
`$menu-item-background-active`	颜色	`get-color(primary)`	活动菜单项的背景颜色。
`$menu-icon-spacing`	数字	`0.25rem`	菜单项中图标和文本之间的间距。
`$menu-state-back-compat`	布尔值	`true`	菜单状态的向后兼容性。如果为 true，则使用 `is-active` 复制 `active`。但请注意，`active` 将在未来版本中删除。
`$menu-centered-back-compat`	布尔值	`true`	菜单居中的向后兼容性。如果为 true，则使用 `.menu.align-center` 复制 `.menu-centered > .menu`。但请注意，`menu-centered` 将在未来版本中删除。
`$menu-icons-back-compat`	布尔值	`true`	在不使用 `.icons` 类的情况下使用 `icon-*` 类的向后兼容性。但请注意，此向后兼容性将在未来版本中删除。

混合

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

@include menu-base;

创建菜单的基本样式。

@include menu-expand;

扩展菜单的项目，使每个项目具有相同的宽度。

@include menu-align;

对齐菜单项。

@include menu-direction($dir);

设置菜单的方向。

参数	类型	默认值	描述
`$dir`	关键字	`horizontal`	菜单的方向。可以是 `horizontal` 或 `vertical`。

@include menu-simple($dir, $margin);

创建一个简单菜单，它没有填充或悬停状态。

参数	类型	默认值	描述
`$dir`	关键字	`$global-left`	菜单的方向。这会影响接收边距的 `<li>` 的一侧。
`$margin`	数字	`$menu-simple-margin`	应用于每个 `<li>` 的边距。

@include menu-nested($margin, $nested-alignment);

通过向菜单添加 margin-left 来添加嵌套菜单的样式。

参数	类型	默认值	描述
`$margin`	关键字或数字	`$menu-nested-margin`	边距的长度。
`$nested-alignment`	关键字	`left`	嵌套类的对齐方式

@include menu-icons;

添加菜单中图标的基本样式。

@include menu-icon-alignment($alignment);

对齐菜单中的顶部/底部图标。

参数	类型	默认值	描述
`$alignment`	关键字	`center`	图标的对齐方式

@include menu-icon-position;

添加菜单中图标的位置类。