Foundation for Sites6.8.1 更新日志
组件列表

下拉菜单

JavaScript

使用下拉菜单插件将基本菜单更改为可扩展的下拉菜单。

水平

下拉菜单建立在 菜单 组件的语法基础上。将类 .dropdown 和属性 data-dropdown-menu 添加到菜单容器以设置下拉菜单。

<ul class="dropdown menu" data-dropdown-menu>
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3</a></li>
  <li><a href="#">Item 4</a></li>
</ul>

要创建下拉菜单，请在 <li> 内嵌套一个新的 <ul>。您可以进一步嵌套以创建更多级别的下拉菜单。

在视频中观看此部分

请注意，<ul> 位于 <a> 之后，而不是在其内部。

edit on codepen button 
<ul class="dropdown menu" data-dropdown-menu>
  <li>
    <a href="#">Item 1</a>
    <ul class="menu">
      <li><a href="#">Item 1A</a></li>
      <!-- ... -->
    </ul>
  </li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3</a></li>
  <li><a href="#">Item 4</a></li>
</ul>

垂直

将 .vertical 类添加到顶级菜单以使其垂直。无论顶级菜单的方向如何，子菜单都会自动垂直。

菜单是块级元素，这意味着它们会拉伸以填充其容器的宽度。为了使以下示例不那么怪异，我们在菜单上硬编码了 max-width。

edit on codepen button 
<ul class="vertical dropdown menu" data-dropdown-menu style="max-width: 250px;">
  <li>
    <a href="#">Item 1</a>
    <ul class="vertical menu nested">
      <li><a href="#">Item 1A</a></li>
      <!-- ... -->
    </ul>
  </li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3</a></li>
  <li><a href="#">Item 4</a></li>
  <!-- ... -->
</ul>

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

防止 FOUC

在加载页面上的 JavaScript 之前，下拉菜单将没有箭头。但是，一旦加载了 JavaScript 文件，就会出现箭头，导致 无样式内容闪烁。您可以通过手动添加 .is-dropdown-submenu-parent 类来防止这种情况。

<ul class="dropdown menu" data-dropdown-menu>
  <li class="is-dropdown-submenu-parent">
    <a href="#">Item 1</a>
    <ul class="menu">
      <li><a href="#">Item 1A</a></li>
      <!-- ... -->
    </ul>
  </li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3</a></li>
  <li><a href="#">Item 4</a></li>
</ul>

Sass 参考

变量

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

名称类型默认值描述
$dropdownmenu-arrows 布尔值 true

为具有下拉菜单的项目启用箭头。
$dropdownmenu-arrow-color 颜色 $anchor-color

如果使用箭头，则设置下拉菜单箭头颜色。
$dropdownmenu-arrow-size 长度 6px

如果使用箭头，则设置下拉菜单箭头大小。
$dropdownmenu-arrow-padding 长度 1.5rem

设置下拉菜单箭头填充以正确对齐箭头。
$dropdownmenu-min-width 长度 200px

下拉子菜单的最小宽度。
$dropdownmenu-background 颜色 null

顶级项目的背景颜色。
$dropdownmenu-submenu-background 颜色 $white

下拉菜单的背景颜色。
$dropdownmenu-padding 数字 $global-menu-padding

顶级项目的填充。
$dropdownmenu-nested-margin 数字 0

设置下拉菜单嵌套边距
$dropdownmenu-submenu-padding 数字 $dropdownmenu-padding

子菜单项的填充。
$dropdownmenu-border 列表 1px solid $medium-gray

下拉子菜单的边框。
$dropdown-menu-item-color-active 颜色 get-color(primary)

活动下拉菜单项的文本颜色。显式覆盖菜单默认值
$dropdown-menu-item-background-active 颜色 transparent

活动下拉菜单项的背景颜色。显式覆盖菜单默认值

JavaScript 参考

初始化

您的 JavaScript 中必须包含以下文件才能使用此插件

  • foundation.core.js
  • foundation.dropdownMenu.js
    • 使用实用程序库 foundation.util.keyboard.js
    • 使用实用程序库 foundation.util.box.js
    • 使用实用程序库 foundation.util.nest.js
    • 使用实用程序库 foundation.util.touch.js

Foundation.DropdownMenu

创建 DropdownMenu 的新实例。

var elem = new Foundation.DropdownMenu(element, options);

触发这些事件： DropdownMenu#event:init

名称类型描述
元素 jQuery 要转换为下拉菜单的 jQuery 对象。
选项 对象 覆盖默认插件设置。

插件选项

使用这些选项来自定义下拉菜单的实例。插件选项可以设置为单独的数据属性、一个组合的 data-options 属性，或作为传递给插件构造函数的对象。 详细了解如何初始化 JavaScript 插件。

名称 类型 默认 描述
data-disable-hover 布尔值 false 禁止悬停事件打开子菜单
data-disable-hover-on-touch 布尔值 true 禁止在触摸设备上悬停
data-autoclose 布尔值 true 如果未单击打开，则允许子菜单在 mouseleave 事件上自动关闭。
data-hover-delay 数字 50 在悬停事件上延迟打开子菜单的时间量。
data-click-open 布尔值 false 允许子菜单在父级单击事件上打开/保持打开状态。允许光标移 Menus are block-level elements, which means they stretch to fill the width of their container. To make the below example less goofy, we've hard-coded a `max-width` on the menu.开菜单。
data-closing-time 数字 500 在 mouseleave 事件上延迟关闭子菜单的时间量。
data-alignment 字符串 自动 菜单相对于子菜单打开方向的位置。由 JS 处理。可以是 `'auto'`、`'left'` 或 `'right'`。
data-close-on-click 布尔值 true 允许单击正文以关闭任何打开的子菜单。
data-close-on-click-inside 布尔值 true 允许单击叶锚点链接以关闭任何打开的子菜单。
data-vertical-class 字符串 垂直 应用于垂直方向菜单的类，Foundation 默认值为 `vertical`。如果使用您自己的类，请更新此值。
data-right-class 字符串 右对齐 应用于右侧方向菜单的类，Foundation 默认值为 `align-right`。如果使用您自己的类，请更新此值。
data-force-follow 布尔值 true 布尔值，用于强制覆盖链接的点击以执行默认操作，在移动设备的第二次触摸事件上。

事件

这些事件将从附加了下拉菜单插件的任何元素触发。

名称描述
show.zf.dropdownMenu 在新下拉窗格可见时触发。
hide.zf.dropdownMenu 在关闭打开的菜单时触发。

方法

_destroy

$('#element').foundation('_destroy');

销毁插件。