跳至主要內容

文件

下拉選單

為可切換的下拉選單定義不同的樣式。

下拉選單元件是具有目標感知能力的。這表示只要滑鼠指標朝向下拉選單移動，下拉選單就會保持開啟。額外的延遲可確保即使滑鼠指標短暫地朝另一個方向移動，下拉選單仍會保持開啟。如果滑鼠懸停在另一個選單項目上，下拉選單會立即關閉。

使用方式

下拉選單是下拉的一個範例，它提供了自己的樣式。任何內容（例如按鈕）都可以切換下拉選單。只需將uk-dropdown屬性新增至切換後的區塊元素即可。

<button type="button"></button>
<div uk-dropdown></div>

可以透過懸停和點擊切換來啟用下拉選單。只需將mode: click選項新增至屬性，以強制僅使用click模式。如果您想要將切換和下拉選單分組，您可以將實用工具元件中的.uk-inline類別新增至環繞兩者的容器元素。

<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 ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<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 ut labore et dolore magna aliqua.</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 ut labore et dolore magna aliqua.</div>
</div>

下拉選單可以包含導覽元件中的導覽。只需將.uk-nav類別和.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>

寬度和網格

您可以將網格元件中的網格放置在下拉選單內。只需將內容包裝在<div>元素中，並新增uk-grid屬性。如果網格在下拉選單不再適合其容器時應自動堆疊，只需新增.uk-drop-grid類別即可。

<div class="uk-width-large" uk-dropdown>
    <div class="uk-drop-grid uk-child-width-1-2@m" uk-grid>…</div>
</div>

使用寬度元件中的其中一個類別來調整下拉選單的寬度。

<button class="uk-button uk-button-default" type="button">Hover</button>
<div class="uk-width-large" uk-dropdown>
    <div class="uk-drop-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>

位置

依預設，下拉選單會定位在切換下方。若要變更其位置，請將pos選項設定為uk-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 Center</button>
    <div uk-dropdown="pos: bottom-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>

<div class="uk-inline">
    <button class="uk-button uk-button-default" type="button">Right Top</button>
    <div uk-dropdown="pos: right-top">
        <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 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>

自動更新

依預設，下拉選單會在捲動時重新定位。若要停用動態定位，請將auto-update: false選項新增至uk-dropdown屬性。下拉選單只會在開啟時定位一次。

<div uk-dropdown="auto-update: false"></div>

目標

依預設，下拉選單會與其切換對齊。若要將下拉選單定位到不同的元素，只需將target: SELECTOR選項新增至uk-dropdown屬性即可。若要只變更下拉選單定位的側邊或與另一個元素的對齊方式，請使用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>

內嵌

依預設，下拉選單會定位在切換之外。若要將位置變更為內部，請將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>

延展

若要延展下拉選單以填滿其最接近的捲動祖先的大小，請將stretch: true選項新增至uk-dropdown屬性。若要僅延展到一個軸，請使用stretch: x或stretch: y。如果設定了boundary選項，則下拉選單會延展到定義的邊界。

<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: uk-animation-*選項，對下拉選單套用一個或多個動畫。您也可以決定動畫的持續時間。只需新增具有毫秒值的duration選項即可。設定animate-out: true，以便在關閉下拉選單時也顯示動畫。

<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>

或者，下拉元件有兩種額外的動畫類型，動畫元件未涵蓋這兩種動畫類型。slide-*動畫會從選定的方向滑動下拉選單及其內容，而使用reveal-*動畫時，下拉選單的內容會保持靜態，並從選定的方向顯示。

動畫 描述
滑動-上 從頂部滑動下拉選單。
滑動-下 從底部滑動下拉選單。
滑動-左 從左側滑動下拉選單。
滑動-右 從右側滑動下拉選單。
顯示-上 從頂部顯示下拉選單。
顯示-下 從底部顯示下拉選單。
顯示-左 從左側顯示下拉選單。
顯示-右 從右側顯示下拉選單。 
<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>

偏移

若要定義下拉選單及其切換之間的自訂偏移，請新增具有像素值的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>

元件選項

這些選項中的任何一個都可以套用至元件屬性。以分號分隔多個選項。深入了解

選項 值 預設值 描述
toggle CSS 選擇器 - * 要用作切換的元素的 CSS 選擇器。依預設，為前一個元素。
pos 字串 下-左 下拉選單位置。
stretch 布林值、字串 false 在兩個（true）或給定的軸（x、y）上延展下拉選單。
mode 字串 點擊、懸停 下拉選單觸發行為模式（click、hover）的逗號分隔清單。
delay-show 數字 0 在懸停模式下，顯示下拉選單之前的延遲時間（以毫秒為單位）。
delay-hide 數字 800 在懸停模式下，隱藏下拉選單之前的延遲時間（以毫秒為單位）。
auto-update 布林值 true 將此選項設定為 false 可在捲動時停用動態定位。
boundary CSS 選擇器 false 下拉選單無法超出並導致其翻轉和位移的區域。依預設，為最近的捲動祖先。
boundary-x CSS 選擇器 false 下拉選單無法超出 x 軸上的區域，導致其翻轉和位移。
boundary-y CSS 選擇器 false 下拉選單無法超出 y 軸上的區域，導致其翻轉和位移。
target 布林值、CSS 選擇器 false 下拉選單定位到的元素（true 代表視窗）。
target-x 布林值、CSS 選擇器 false 下拉選單定位到的元素的 X 軸（true 代表視窗）。
target-y 布林值、CSS 選擇器 false 下拉選單定位到的元素的 Y 軸（true 代表視窗）。
inset 布林值 false 將其定位在其目標內部。
flip 布林值 true 如果下拉選單溢出邊界，則沿主軸翻轉下拉選單。
shift 布林值 true 如果下拉選單溢出邊界，則沿橫軸位移下拉選單。
offset 數字 0 下拉選單的偏移。
animation 字串 uk-animation-fade 動畫的空格分隔名稱。以逗號分隔，用於動畫輸出。
animate-out 布林值 false 關閉下拉選單時使用動畫。
bg-scroll 布林值 true 允許在下拉選單開啟時背景捲動。
close-on-scroll 布林值 false 在捲動父層捲動容器時關閉下拉選單。
duration 數字 200 動畫持續時間。
container 布林值 false 透過選擇器定義目標容器，以指定下拉選單應附加在 DOM 中的位置。

pos 是主要選項，如果它是屬性值中唯一的選項，則其鍵可以省略。

<span uk-dropdown="top-left"></span>

JavaScript

深入了解JavaScript 元件。

初始化

UIkit.dropdown(element, options);

事件

以下事件將在附加此元件的元素上觸發

名稱 描述
toggle 在項目切換之前觸發。
beforeshow 在項目顯示之前觸發。 可以透過在事件上呼叫 preventDefault() 來阻止顯示。
show 在項目顯示之後觸發。
shown 在項目顯示動畫完成後觸發。
beforehide 在項目隱藏之前觸發。 可以透過在事件上呼叫 preventDefault() 來阻止隱藏。
hide 在項目隱藏之前觸發。
hidden 在項目隱藏之後觸發。
stack 當套用 drop-stack 類別時觸發。

方法

以下方法適用於此元件

顯示

UIkit.dropdown(element).show();

顯示下拉選單。

隱藏

UIkit.dropdown(element).hide(delay);

隱藏下拉選單。

名稱 類型 預設值 描述
delay 布林值 true 延遲隱藏下拉選單。

輔助功能

下拉選單元件遵循 選單按鈕 WAI-ARIA 設計模式，並自動設定適當的 WAI-ARIA 角色、狀態和屬性。

鍵盤互動

可以使用以下按鍵透過鍵盤存取下拉選單元件。