下拉菜单
为可切换的下拉菜单定义不同的样式。
用法
dropdown其实相当于带有自己样式的 drop的一个特例。任何内容（例如按钮）都可以切换下拉菜单。只需为拨动器后面的块元素添加uk-dropdown 属性即可。
<button type="button"></button>
<div uk-dropdown></div>
可以通过鼠标悬停和鼠标点击来触发dropdown，为属性添加 mode: click 选项启用点击模式。如果要将拨动器和dropdown进行分组，则只需将Utility 组件中的.uk-inline class添加到它们外围的容器中即可。
<div class="uk-inline">
<button type="button"></button>
<div uk-dropdown="mode: click"></div>
</div>
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
-
<div class="uk-inline"> <button class="uk-button uk-button-default" type="button">Hover</button> <div uk-dropdown>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div> </div> <div class="uk-inline"> <button class="uk-button uk-button-default" type="button">Click</button> <div uk-dropdown="mode: click">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div> </div>
下拉列表中的导航菜单
下拉列表可以包含来自 Nav 组件中的导航。只需将 .uk-nav class 和 .uk-dropdown-nav
修饰符添加到 <ul> 元素即可。
<button type="button"></button>
<div uk-dropdown>
<ul class="uk-nav uk-dropdown-nav">...</ul>
</div>
-
<button class="uk-button uk-button-default" type="button">Hover</button> <div uk-dropdown> <ul class="uk-nav uk-dropdown-nav"> <li class="uk-active"><a href="#">Active</a></li> <li><a href="#">Item</a></li> <li class="uk-nav-header">Header</li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li class="uk-nav-divider"></li> <li><a href="#">Item</a></li> </ul> </div>
在下拉菜单中使用网格
可以在下拉菜单中使用 Grid 组件， 在网格中可以添加导航或者其他内容。只需用<div>
元素包裹内容并为div添加uk-grid 属性。 如果在下拉菜单的尺寸不适应容器的尺寸，需要自动堆叠网格的话，需要添加 .uk-dropdown-grid
class。
<div class="uk-width-large" uk-dropdown>
<div class="uk-dropdown-grid uk-child-width-1-2@m" uk-grid>...</div>
</div>
可以使用 Width组件 内的某个class来调整下拉菜单的宽度。
-
<button class="uk-button uk-button-default" type="button">Hover</button> <div class="uk-width-large" uk-dropdown> <div class="uk-dropdown-grid uk-child-width-1-2@m" uk-grid> <div> <ul class="uk-nav uk-dropdown-nav"> <li class="uk-active"><a href="#">Active</a></li> <li><a href="#">Item</a></li> <li class="uk-nav-header">Header</li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li class="uk-nav-divider"></li> <li><a href="#">Item</a></li> </ul> </div> <div> <ul class="uk-nav uk-dropdown-nav"> <li class="uk-active"><a href="#">Active</a></li> <li><a href="#">Item</a></li> <li class="uk-nav-header">Header</li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li class="uk-nav-divider"></li> <li><a href="#">Item</a></li> </ul> </div> </div> </div>
大修饰符
为具有较大填充的下拉列表添加类。.uk-dropdown-large
<div class="uk-dropdown-large" uk-dropdown></div>-
<div class="uk-inline"> <button class="uk-button uk-button-default" type="button">Large</button> <div class="uk-dropdown-large" uk-dropdown> <ul class="uk-nav uk-dropdown-nav"> <li class="uk-active"><a href="#">Active</a></li> <li><a href="#">Item</a></li> <li class="uk-nav-header">Header</li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li class="uk-nav-divider"></li> <li><a href="#">Item</a></li> </ul> </div> </div>
定位
默认情况下，下拉框位于切换的下方。要更改其位置，请为uk-dropdown属性设置pos选项。选项值的第一部分指向下拉菜单在哪一侧，第二部分定义了它与拨动器的对齐方式。
| 位置 | 描述 |
|---|---|
top-left |
dropdown放置在拨动器上方，并与拨动器左对齐。 |
top-center |
dropdown放置在拨动器上方，并与拨动器居中对齐。 |
top-right |
dropdown放置在拨动器上方，并与拨动器右对齐。 |
bottom-left |
dropdown放置在拨动器下方，并与拨动器左对齐。 |
bottom-center |
dropdown放置在拨动器下方，并与拨动器居中对齐。 |
bottom-right |
dropdown放置在拨动器下方，并与拨动器右对齐。 |
left-top |
dropdown放置在拨动器左侧，并与拨动器顶部对齐。 |
left-center |
dropdown放置在拨动器左侧，并与拨动器居中对齐。 |
left-bottom |
dropdown放置在拨动器左侧，并与拨动器底部对齐。 |
right-top |
dropdown放置在拨动器右侧，并与拨动器顶部对齐。 |
right-center |
dropdown放置在拨动器右侧，并与拨动器居中对齐。 |
right-bottom |
dropdown放置在拨动器右侧，并与拨动器底部对齐。 |
<div uk-dropdown="pos: top-left"></div>
-
<div class="uk-inline"> <button class="uk-button uk-button-default" type="button">Top Right</button> <div uk-dropdown="pos: top-right"> <ul class="uk-nav uk-dropdown-nav"> <li class="uk-active"><a href="#">Active</a></li> <li><a href="#">Item</a></li> <li class="uk-nav-header">Header</li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li class="uk-nav-divider"></li> <li><a href="#">Item</a></li> </ul> </div> </div> <div class="uk-inline"> <button class="uk-button uk-button-default" type="button">Bottom Justify</button> <div uk-dropdown="pos: bottom-justify"> <ul class="uk-nav uk-dropdown-nav"> <li class="uk-active"><a href="#">Active</a></li> <li><a href="#">Item</a></li> <li class="uk-nav-header">Header</li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li class="uk-nav-divider"></li> <li><a href="#">Item</a></li> </ul> </div> </div> <div class="uk-inline"> <button class="uk-button uk-button-default" type="button">Right Center</button> <div uk-dropdown="pos: right-center"> <ul class="uk-nav uk-dropdown-nav"> <li class="uk-active"><a href="#">Active</a></li> <li><a href="#">Item</a></li> <li class="uk-nav-header">Header</li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li class="uk-nav-divider"></li> <li><a href="#">Item</a></li> </ul> </div> </div>
边界
默认情况下，下拉菜单超出视口或任何其他父滚动祖先元素时会自动翻转，以防止它遮盖住拨动器，同时会改变对齐方式来适应视口。要将其他父元素设置为边界，只需使用边界选择器，将boundary:
SELECTOR选项添加到uk-dropdown属性内。
<div class="my-class">
<button type="button"></button>
<div uk-dropdown="boundary: !.my-class"></div>
</div>
-
<div class="boundary uk-panel uk-placeholder uk-height-medium"> <button class="uk-button uk-button-default uk-float-left" type="button">Bottom Right</button> <div uk-dropdown="pos: bottom-right; boundary: !.boundary"> <ul class="uk-nav uk-dropdown-nav"> <li class="uk-active"><a href="#">Active</a></li> <li><a href="#">Item</a></li> <li class="uk-nav-header">Header</li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li class="uk-nav-divider"></li> <li><a href="#">Item</a></li> </ul> </div> <button class="uk-button uk-button-default uk-float-right" type="button">Bottom Left</button> <div uk-dropdown="pos: bottom-left; boundary: !.boundary"> <ul class="uk-nav uk-dropdown-nav"> <li class="uk-active"><a href="#">Active</a></li> <li><a href="#">Item</a></li> <li class="uk-nav-header">Header</li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li class="uk-nav-divider"></li> <li><a href="#">Item</a></li> </ul> </div> </div>
禁用翻转
要禁用自动移位和翻转，请将shift: false 或 flip: false 选项添加到uk-dropdown属性内。
<div uk-dropdown="shift: false; flip: false"></div><div uk-dropdown="shift: false; flip: false"></div>-
<div class="boundary uk-panel uk-placeholder uk-height-medium"> <button class="uk-button uk-button-default uk-float-left" type="button">Bottom Right</button> <div uk-dropdown="pos: bottom-right; boundary: !.boundary; shift: false; flip: false"> <ul class="uk-nav uk-dropdown-nav"> <li class="uk-active"><a href="#">Active</a></li> <li><a href="#">Item</a></li> <li class="uk-nav-header">Header</li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li class="uk-nav-divider"></li> <li><a href="#">Item</a></li> </ul> </div> <button class="uk-button uk-button-default uk-float-right" type="button">Bottom Left</button> <div uk-dropdown="pos: bottom-left; boundary: !.boundary; shift: false; flip: false"> <ul class="uk-nav uk-dropdown-nav"> <li class="uk-active"><a href="#">Active</a></li> <li><a href="#">Item</a></li> <li class="uk-nav-header">Header</li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li class="uk-nav-divider"></li> <li><a href="#">Item</a></li> </ul> </div> </div>
自动更新
默认情况下，下拉列表会在页面滚动时根据情况重新定位。要禁用动态定位，请在uk-dropdown属性内添加auto-update: false选项。dropdown将只会在被触发打开时定位一次。
<div uk-dropdown="auto-update: false"></div>目标
默认情况下，dropdown与其拨动器对齐。要将下拉列表定位到其他元素，只需在uk-dropdown属性内添加target: SELECTOR选项即可。若要仅更改下拉列表所在的一侧或与其他元素的对齐方式，请使用target-x: SELECTOR 或 target-y: SELECTOR。
<div class="my-class">
<button type="button"></button>
<div uk-dropdown="target: !.my-class"></div>
</div><div class="target uk-panel uk-placeholder uk-height-medium"> <button class="uk-button uk-button-default uk-float-left" type="button">Bottom Left</button> <div uk-dropdown="pos: bottom-left; target: !.target"> <ul class="uk-nav uk-dropdown-nav"> <li class="uk-active"><a href="#">Active</a></li> <li><a href="#">Item</a></li> <li class="uk-nav-header">Header</li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li class="uk-nav-divider"></li> <li><a href="#">Item</a></li> </ul> </div> <button class="uk-button uk-button-default uk-float-right" type="button">Bottom Right</button> <div uk-dropdown="pos: bottom-right; target: !.target"> <ul class="uk-nav uk-dropdown-nav"> <li class="uk-active"><a href="#">Active</a></li> <li><a href="#">Item</a></li> <li class="uk-nav-header">Header</li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li class="uk-nav-divider"></li> <li><a href="#">Item</a></li> </ul> </div> </div>
嵌入
默认情况下，dropdown位于拨动器外部。要将位置更改为内部，请将inset: true选项添加到uk-dropdown属性中。只有当也设置了target选项，以便下拉菜单不覆盖拨动器的时候，才应该使用此选项。
<div uk-dropdown="target: .my-class; inset: true"></div><div class="target uk-panel uk-placeholder uk-height-large"> <button class="uk-button uk-button-default uk-float-left" type="button">Bottom Left</button> <div uk-dropdown="pos: bottom-left; target: !.target; inset: true"> <ul class="uk-nav uk-dropdown-nav"> <li class="uk-active"><a href="#">Active</a></li> <li><a href="#">Item</a></li> <li class="uk-nav-header">Header</li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li class="uk-nav-divider"></li> <li><a href="#">Item</a></li> </ul> </div> <button class="uk-button uk-button-default uk-float-right" type="button">Bottom Right</button> <div uk-dropdown="pos: bottom-right; target: !.target; inset: true"> <ul class="uk-nav uk-dropdown-nav"> <li class="uk-active"><a href="#">Active</a></li> <li><a href="#">Item</a></li> <li class="uk-nav-header">Header</li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li class="uk-nav-divider"></li> <li><a href="#">Item</a></li> </ul> </div> </div>
拉伸
要拉伸dropdown使其能填充满最近的滚动祖先，请向uk-dropdown属性中添加stretch: true选项。若要仅拉伸到一个轴，请使用 stretch: x或 stretch: y。如果设置了boundary选项，则dropdown将拉伸到定义好的边界位置。
<div uk-dropdown="stretch: true"></div><nav class="uk-navbar-container" uk-navbar> <div class="uk-navbar-left"> <ul class="uk-navbar-nav"> <li> <a href="#">Hover</a> <div class="uk-navbar-dropdown" uk-dropdown="boundary: !.uk-navbar; stretch: x; flip: false"> <ul class="uk-nav uk-dropdown-nav"> <li class="uk-active"><a href="#">Active</a></li> <li><a href="#">Item</a></li> <li class="uk-nav-header">Header</li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li class="uk-nav-divider"></li> <li><a href="#">Item</a></li> </ul> </div> </li> </ul> </div> </nav>
动画
添加 Animation 组件中的 animation: uk-animation-* 选项，就能为下拉菜单添加一个或多个动画。还能设置动画的持续时间，添加以毫秒为单位的带值的 duration 选项就行，设置animation -out: true可以在关闭drop时显示动画。
<div uk-dropdown="animation: uk-animation-slide-top-small; duration: 1000"></div>
<button class="uk-button uk-button-default" type="button">Hover</button> <div uk-dropdown="animation: uk-animation-slide-top-small; animate-out: true"> <ul class="uk-nav uk-dropdown-nav"> <li class="uk-active"><a href="#">Active</a></li> <li><a href="#">Item</a></li> <li class="uk-nav-header">Header</li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li class="uk-nav-divider"></li> <li><a href="#">Item</a></li> </ul> </div>
另外，Drop组件还有两个未被animation组件覆盖的动画类型。 动画从选定方向滑动下拉列表及其内容，而对于动画，下拉列表的内容保持静态并从选定方向显示。slide-*动画从选定的方向滑动下拉菜单及其内容，而reveal-*动画效果为dropdown的内容保持静态，并从选定的方向显示。
| 动画 | 描述 |
|---|---|
slide-top |
从顶部滑动下拉列表。 |
slide-bottom |
从底部滑动下拉列表。 |
slide-left |
从左侧滑动下拉列表。 |
slide-right |
从右侧滑动下拉列表。 |
reveal-top |
显示从顶部开始的下拉列表。 |
reveal-bottom |
显示从底部开始的下拉列表。 |
reveal-left |
显示左侧的下拉列表。 |
reveal-right |
显示右侧的下拉列表。 |
<div uk-dropdown="animation: slide-top; animate-out: true"></div><div class="uk-margin" uk-margin> <div class="uk-inline"> <button class="uk-button uk-button-default" type="button">Slide Top</button> <div uk-dropdown="animation: slide-top; animate-out: true; duration: 700"> <ul class="uk-nav uk-dropdown-nav"> <li class="uk-active"><a href="#">Active</a></li> <li><a href="#">Item</a></li> <li class="uk-nav-header">Header</li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li class="uk-nav-divider"></li> <li><a href="#">Item</a></li> </ul> </div> </div> <div class="uk-inline"> <button class="uk-button uk-button-default" type="button">Reveal Top</button> <div uk-dropdown="animation: reveal-top; animate-out: true; duration: 700"> <ul class="uk-nav uk-dropdown-nav"> <li class="uk-active"><a href="#">Active</a></li> <li><a href="#">Item</a></li> <li class="uk-nav-header">Header</li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li class="uk-nav-divider"></li> <li><a href="#">Item</a></li> </ul> </div> </div> <div class="uk-inline"> <button class="uk-button uk-button-default" type="button">Slide Left</button> <div uk-dropdown="animation: slide-left; animate-out: true; duration: 700"> <ul class="uk-nav uk-dropdown-nav"> <li class="uk-active"><a href="#">Active</a></li> <li><a href="#">Item</a></li> <li class="uk-nav-header">Header</li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li class="uk-nav-divider"></li> <li><a href="#">Item</a></li> </ul> </div> </div> <div class="uk-inline"> <button class="uk-button uk-button-default" type="button">Reveal Left</button> <div uk-dropdown="animation: reveal-left; animate-out: true; duration: 700"> <ul class="uk-nav uk-dropdown-nav"> <li class="uk-active"><a href="#">Active</a></li> <li><a href="#">Item</a></li> <li class="uk-nav-header">Header</li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li class="uk-nav-divider"></li> <li><a href="#">Item</a></li> </ul> </div> </div> </div>
偏移量
若要自定义dropdown及其拨动器之间的偏移量，请添加带有以像素为单位的值的offset选项。
<div uk-dropdown="offset: 80"></div><button class="uk-button uk-button-default" type="button">Hover</button> <div uk-dropdown="offset: 80"> <ul class="uk-nav uk-dropdown-nav"> <li class="uk-active"><a href="#">Active</a></li> <li><a href="#">Item</a></li> <li class="uk-nav-header">Header</li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li class="uk-nav-divider"></li> <li><a href="#">Item</a></li> </ul> </div>
组件选项
以下选项中的任意之一都可以应用于组件属性。如含有多个选项，那么它们之间应该使用分号分隔。了解更多。
| Option | Value | Default | Description |
|---|---|---|---|
toggle |
CSS selector | - * |
作为拨动器的元素的CSS选择器。默认地会使用下拉组件前一个元素作为拨动器。 |
pos |
String | bottom-left |
下拉组件的定位。 |
stretch |
Boolean,x，y |
true |
在两个(true)或给定轴上拉伸dropdown。 |
mode |
click, hover | click, hover |
dropdown拨动器的触发模式，以逗号分隔 |
delay-show |
Number | 0 |
hover 模式下下拉组件出现的延时，以毫秒为单位 |
delay-hide |
Number | 800 |
hover 模式下下拉组件隐藏的延时，以毫秒为单位 |
auto-update |
Boolean | true |
将此选项设置为false即可禁用滚动时的动态定位。 |
boundary |
CSS selector | false |
dropdown不能超过导致它翻转和移动的区域。默认情况下为最近的滚动祖先。 |
target |
Boolean, CSS selector | false |
dropdown定位到的元素(对于窗口为true)。 |
target-x |
布尔值，CSS 选择器 | false |
dropdown所在的元素的 X 轴 （ true为窗口）。 |
target-y |
布尔值，CSS 选择器 | false |
dropdown定位到的元素的 Y 轴 （ true为窗口）。 |
inset |
布尔值 | false |
在其目标内放置。 |
inset |
Boolean | false |
在其目标内放置。 |
flip |
Boolean | true |
如果dropdown溢出边界，则沿主轴翻转dropdown。 |
shift |
Boolean | true |
如果dropdown溢出边界，则沿交叉轴翻转dropdown。 |
offset |
Number | 0 |
下拉组件容器的偏移量 |
animation |
String | uk-animation-fade |
要应用的动画名称，多个动画以逗号分隔。 |
animate-out |
Boolean | false |
关闭dropdown时是否使用动画。 |
bg-scroll |
Boolean | true |
在打开dropdown时允许背景滚动。 |
duration |
Number | 200 |
动画持续时间（以毫秒为单位）。 |
container |
Boolean | false |
通过选择器定义目标容器，以指定dropdown追加到 DOM 中的具体位置。 |
JavaScript
了解有关 JavaScript 组件的更多信息。
初始化
UIkit.dropdown(element, options);
事件
将在附加了此组件的元素上触发以下事件：
| Name | Description |
|---|---|
toggle |
元素被拨动时触发 |
beforeshow |
元素被显示前触发。以通过调用 preventDefault() 事件来防止显示。 |
show |
显示一个元素后触发。 |
shown |
元素的显示动画完成后触发。 |
beforehide |
在元素隐藏之前触发。可以通过调用 preventDefault() 事件来防止隐藏。 |
hide |
元素被隐藏前触发。 |
hidden |
元素被隐藏后触发。 |
stack |
drop-stack被应用时触发 |
方法
以下方法可用于下拉组件：
显示
UIkit.dropdown(element).show();
显示dropdown。
隐藏
UIkit.dropdown(element).hide(delay);
隐藏dropdown。
| Name | Type | Default | Description |
|---|---|---|---|
delay |
Boolean | true | 延迟隐藏dropdown |