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

下拉菜单

JavaScript

下拉窗格是可以点击或悬停显示的小精灵。

您可能正在寻找下拉菜单，这是一个单独的插件。

基础知识

要创建下拉窗格，请将类.dropdown-pane和属性data-dropdown添加到元素中。还要为下拉菜单指定一个唯一的 ID。

要创建下拉触发器，请将data-toggle添加到<button>。data-toggle的值是下拉菜单的 ID。

在视频中观看此部分

edit on codepen button 
<button class="button" type="button" data-toggle="example-dropdown">Toggle Dropdown</button>
<div class="dropdown-pane" id="example-dropdown" data-dropdown data-auto-focus="true">
  Example form in a dropdown.
  <form>
    <div class="grid-container">
      <div class="grid-x grid-margin-x">
        <div class="cell medium-6">
          <label>Name
            <input type="text" placeholder="Kirk, James T.">
          </label>
        </div>
        <div class="cell medium-6">
          <label>Rank
            <input type="text" placeholder="Captain">
          </label>
        </div>
      </div>
    </div>
  </form>
</div>

<button class="button" type="button" data-toggle="example-dropdown-1">Hoverable Dropdown</button>
<div class="dropdown-pane" id="example-dropdown-1" data-dropdown data-hover="true" data-hover-pane="true">
  Just some junk that needs to be said. Or not. Your choice.
</div>

定位

默认情况下，下拉菜单锚定在其打开的按钮下方。将类.top、.right或.bottom添加到下拉菜单以更改此设置。

edit on codepen button 
<button class="button" type="button" data-toggle="example-dropdown2">Top Aligned</button>

<div class="dropdown-pane top" id="example-dropdown2" data-dropdown>
  Just some junk that needs to be said. Or not. Your choice.
</div>

将.float-right或.float-left添加到锚点也会改变下拉菜单的方向。

显式定位

v6.4 中的新功能：小心！此显式定位模型是 v6.4 中的新功能。

如果您可以在下拉元素中定义两个位置，那不是很好吗？下拉菜单有一个完全显式的定位模型，您可以通过它使用data-position和data-alignment来定义框的两个位置。

这些下拉菜单测试了各种定位和对齐方式。有效位置为左/右/上/下。有效的对齐方式为左/右/上/下/居中。左对齐表示左侧应对齐。右对齐表示右侧应对齐。居中对齐表示中心应对齐。

顶部和底部定位

<!-- Bottom Left -->
<button class="button" type="button" data-toggle="example-dropdown-bottom-left">Toggle Dropdown</button>
<div class="dropdown-pane" data-position="bottom" data-alignment="left" id="example-dropdown-bottom-left" data-dropdown data-auto-focus="true">
  <!-- My dropdown content in here -->
</div>

<!-- Bottom Center -->
<button class="button" type="button" data-toggle="example-dropdown-bottom-center">Toggle Dropdown</button>
<div class="dropdown-pane" data-position="bottom" data-alignment="center" id="example-dropdown-bottom-center" data-dropdown data-auto-focus="true">
  <!-- My dropdown content in here -->
</div>

<!-- Bottom Right -->
<button class="button" type="button" data-toggle="example-dropdown-bottom-right">Toggle Dropdown</button>
<div class="dropdown-pane" data-position="bottom" data-alignment="right" id="example-dropdown-bottom-right" data-dropdown data-auto-focus="true">
  <!-- My dropdown content in here -->
</div>

<!-- Top Left -->
<button class="button" type="button" data-toggle="example-dropdown-top-left">Toggle Dropdown</button>
<div class="dropdown-pane" data-position="top" data-alignment="left" id="example-dropdown-top-left" data-dropdown data-auto-focus="true">
  <!-- My dropdown content in here -->
</div>

<!-- Top Center -->
<button class="button" type="button" data-toggle="example-dropdown-top-center">Toggle Dropdown</button>
<div class="dropdown-pane" data-position="top" data-alignment="center" id="example-dropdown-top-center" data-dropdown data-auto-focus="true">
  <!-- My dropdown content in here -->
</div>

<!-- Top Right -->
<button class="button" type="button" data-toggle="example-dropdown-top-right">Toggle Dropdown</button>
<div class="dropdown-pane" data-position="top" data-alignment="right" id="example-dropdown-top-right" data-dropdown data-auto-focus="true">
  <!-- My dropdown content in here -->
</div>

左下

底部居中

右下

左上

顶部居中

右上


左侧和右侧定位

<!-- Right Top -->
<button class="button" type="button" data-toggle="example-dropdown-right-top">Toggle Dropdown</button>
<div class="dropdown-pane" data-position="right" data-alignment="top" id="example-dropdown-right-top" data-dropdown data-auto-focus="true">
</div>

<!-- Left Top -->
<button class="button" type="button" data-toggle="example-dropdown-left-top">Toggle Dropdown</button>
<div class="dropdown-pane" data-position="left" data-alignment="top" id="example-dropdown-left-top" data-dropdown data-auto-focus="true">
</div>

<!-- Right Center -->
<button class="button" type="button" data-toggle="example-dropdown-right-center">Toggle Dropdown</button>
<div class="dropdown-pane" data-position="right" data-alignment="center" id="example-dropdown-right-center" data-dropdown data-auto-focus="true">
</div>

<!-- Left Center -->
<button class="button" type="button" data-toggle="example-dropdown-left-center">Toggle Dropdown</button>
<div class="dropdown-pane" data-position="left" data-alignment="center" id="example-dropdown-left-center" data-dropdown data-auto-focus="true">
</div>

<!-- Right Bottom -->
<button class="button" type="button" data-toggle="example-dropdown-right-bottom">Toggle Dropdown</button>
<div class="dropdown-pane" data-position="right" data-alignment="bottom" id="example-dropdown-right-bottom" data-dropdown data-auto-focus="true">
</div>

<!-- Left Bottom -->
<button class="button" type="button" data-toggle="example-dropdown-left-bottom">Toggle Dropdown</button>
<div class="dropdown-pane" data-position="left" data-alignment="bottom" id="example-dropdown-left-bottom" data-dropdown data-auto-focus="true">
</div>

右上

左上

右侧居中

左侧居中

右下

左下

Sass 参考

变量

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

姓名类型默认值描述
$dropdown-padding 列表 1rem

下拉窗格的填充。
$dropdown-background 颜色 $body-background

下拉窗格的背景。
$dropdown-border 列表 1px solid $medium-gray

下拉窗格的边框。
$dropdown-font-size 列表 1rem

下拉窗格的字体大小。
$dropdown-width 数字 300px

下拉窗格的宽度。
$dropdown-radius 数字 $global-radius

下拉窗格的边框半径。
$dropdown-sizes 映射 tiny: 100px
small: 200px
large: 400px

下拉窗格的大小。每种大小都是一个可以应用的 CSS 类。

混合宏

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

@include dropdown-container;

应用基本下拉菜单的样式。

JavaScript 参考

初始化

要使用此插件，必须在您的 JavaScript 中包含以下文件

  • foundation.core.js
  • foundation.dropdown.js
    • 使用实用程序库foundation.util.keyboard.js
    • 使用实用程序库foundation.util.box.js
    • 使用实用程序库foundation.util.touch.js
    • 使用实用程序库foundation.util.triggers.js

Foundation.Dropdown

创建一个 Dropdown 的新实例。

var elem = new Foundation.Dropdown(element, options);
姓名类型描述
元素 jQuery 要转换为下拉菜单的 jQuery 对象。对象应该是下拉面板的对象，而不是其锚点的对象。
选项 对象 覆盖默认插件设置。

插件选项

使用这些选项来自定义 Dropdown 的实例。插件选项可以设置为单个数据属性、一个组合的data-options属性或作为传递给插件构造函数的对象。了解有关如何初始化 JavaScript 插件的更多信息。

姓名 类型 默认 描述
data-parent-class 字符串 null 指定 Dropdown 的边界容器的类（默认值：窗口）
data-hover-delay 数字 250 在悬停事件上延迟打开子菜单的时间（以毫秒为单位）。
data-hover 布尔值 false 允许子菜单在悬停事件上打开
data-hover-pane 布尔值 false 将鼠标悬停在下拉窗格上时，不要关闭下拉菜单
data-v-offset 数字 0 下拉窗格与打开时触发元素之间的像素数。
data-h-offset 数字 0 下拉窗格与打开时触发元素之间的像素数。
data-position 字符串 自动 下拉菜单的位置。可以是左、右、下、上或自动。
data-alignment 字符串 自动 下拉菜单相对于锚点的对齐方式。可以是左、右、下、上、居中或自动。
data-allow-overlap 布尔值 false 允许容器/窗口重叠。如果为 false，下拉菜单将首先尝试按照 data-position 和 data-alignment 定义的位置进行定位，但如果会导致溢出，则会重新定位。
data-allow-bottom-overlap 布尔值 true 仅允许容器底部重叠。这是下拉菜单最常见的行为，允许下拉菜单扩展屏幕底部，但不会影响或突破容器。
data-trap-focus 布尔值 false 如果使用键盘命令打开，则允许插件将焦点锁定到下拉窗格。
data-auto-focus 布尔值 false 允许插件将焦点设置到窗格内的第一个可聚焦元素，而不管打开方式如何。
data-close-on-click 布尔值 false 允许单击正文以关闭下拉菜单。
data-force-follow 布尔值 true 如果为 true，则在单击时执行切换的默认操作（例如，跟随带有 href 的链接）。如果悬停选项也为 true，则在第一次单击时阻止默认操作以用于移动/触摸设备，并在第二次单击时执行默认操作。

事件

这些事件将从附加了 Dropdown 插件的任何元素触发。

姓名描述
closeme.zf.dropdown 关闭其他打开的下拉菜单的事件，通常在下拉菜单打开时触发
show.zf.dropdown 下拉菜单可见时触发。
hide.zf.dropdown 下拉菜单不再可见时触发。

方法

open

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

打开下拉窗格，并触发冒泡事件以关闭其他下拉菜单。

触发以下事件： Dropdown#event:closeme Dropdown#event:show

close

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

关闭打开的下拉窗格。

触发以下事件： Dropdown#event:hide

toggle

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

切换下拉窗格的可见性。

_destroy

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

销毁下拉菜单。