下拉導覽
為任何導覽建立下拉選單。
下拉導覽元件會初始化導覽中所有具有相同選項的下拉選單，因此它們不必單獨初始化。下拉導覽中的所有下拉選單都具有目標感知功能。這表示只要滑鼠指標朝下拉選單移動，下拉選單就會保持開啟。額外的延遲可確保即使滑鼠指標短暫地朝另一個方向移動，下拉選單仍會保持開啟。在懸停模式下，如果滑鼠懸停在另一個選單項目上，下拉選單會立即關閉。
用法
下拉導覽元件由多個切換開關及其相關的下拉選單組成。將 uk-dropnav 屬性新增至包含切換開關的列表元素或其父容器元素。透過將 .uk-dropdown 類別新增至下拉選單，並將 .uk-dropdown-nav 類別新增至下拉選單內的導覽，來使用下拉選單元件。
下拉導覽切換開關透過其他元件設定樣式，其中一些將在此處顯示。
<ul uk-dropnav>
<li>
<a href=""></a>
<div class="uk-dropdown">
<ul class="uk-nav uk-dropdown-nav">…</ul>
</div>
</li>
</ul>在此範例中，我們使用的是次導覽元件。
<nav uk-dropnav>
<ul class="uk-subnav">
<li class="uk-active"><a href="#">Active</a></li>
<li>
<a href>Parent <span uk-drop-parent-icon></span></a>
<div class="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><a href="#">Item</a></li>
</ul>
</div>
</li>
<li>
<a href>Parent <span uk-drop-parent-icon></span></a>
<div class="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><a href="#">Item</a></li>
</ul>
</div>
</li>
<li><a href="#">Item</a></li>
</ul>
</nav>
下拉條
下拉條會延伸至下拉導覽的完整寬度，並顯示不含預設樣式的下拉選單。若要將下拉選單放置在這樣的下拉條內，請將 dropbar: true 選項新增至 uk-dropnav。或者，使用 dropbar-anchor 選項來選取下拉條將插入標記中的哪個元素之後。
<nav uk-dropnav="dropbar: true">…</nav><nav uk-dropnav="dropbar: true">
<ul class="uk-subnav">
<li class="uk-active"><a href="#">Active</a></li>
<li>
<a href>Item</a>
<div class="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>
</li>
<li>
<a href>Item</a>
<div class="uk-dropdown uk-width-large">
<div class="uk-child-width-1-2" 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>
</li>
</ul>
</nav>點擊模式
下拉導覽內的父項目可以透過懸停或點擊切換開關來啟用。只要將 mode: click 選項新增至 uk-dropnav 屬性即可。
<nav uk-dropnav="mode: click">…</nav><nav uk-dropnav="mode: click">
<ul class="uk-subnav">
<li class="uk-active"><a href="#">Active</a></li>
<li>
<a href>Parent <span uk-drop-parent-icon></span></a>
<div class="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><a href="#">Item</a></li>
</ul>
</div>
</li>
<li>
<a href>Parent <span uk-drop-parent-icon></span></a>
<div class="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><a href="#">Item</a></li>
</ul>
</div>
</li>
<li><a href="#">Item</a></li>
</ul>
</nav>對齊
預設情況下，下拉選單會定位在下拉條項目下方，並靠左對齊。若要變更對齊方式，請將 align 選項設定為 uk-dropbar 屬性。
| 位置 | 描述 |
|---|---|
左 |
將下拉選單靠左對齊。 |
右 |
將下拉選單靠右對齊。 |
置中 |
將下拉選單置中對齊。 |
<nav uk-dropbar="align: center">…</nav><nav uk-dropnav="align: center">
<ul class="uk-subnav uk-flex-center">
<li class="uk-active"><a href="#">Active</a></li>
<li>
<a href>Parent <span uk-drop-parent-icon></span></a>
<div class="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><a href="#">Item</a></li>
</ul>
</div>
</li>
<li>
<a href>Parent <span uk-drop-parent-icon></span></a>
<div class="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><a href="#">Item</a></li>
</ul>
</div>
</li>
<li><a href="#">Item</a></li>
</ul>
</nav>目標
預設情況下，下拉選單會與其切換項目對齊。若要將下拉選單定位到不同的元素，只要將 target: SELECTOR 選項新增至 uk-dropbar 屬性即可。
<nav uk-dropbar="target: !.uk-section">…</nav><div class="uk-section uk-section-muted uk-section-small">
<nav uk-dropnav="target: !.uk-section; align: center">
<ul class="uk-subnav">
<li class="uk-active"><a href="#">Active</a></li>
<li>
<a href>Parent</a>
<div class="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>
</li>
<li>
<a href>Parent</a>
<div class="uk-dropdown uk-width-large">
<div class="uk-child-width-1-2" 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>
</li>
</ul>
</nav>
</div>延展
若要延展下拉選單，請使用下拉元件及其 stretch 選項。在下列範例中，下拉選單會與下拉導覽的邊界對齊。
<nav uk-dropnav="boundary: true; stretch: x; flip: false">…</nav><nav uk-dropnav="boundary: true; stretch: x; flip: false">
<ul class="uk-subnav">
<li class="uk-active"><a href="#">Active</a></li>
<li>
<a href>Parent</a>
<div class="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>
</li>
<li>
<a href>Parent</a>
<div class="uk-dropdown">
<div class="uk-child-width-1-2" 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>
</li>
</ul>
</nav>父項目圖示
若要建立父項目圖示，只要使用下拉元件，並將 uk-drop-parent-icon 屬性新增至 <span> 元素即可。
<ul uk-dropnav>
<li>
<a href="">Parent <span uk-drop-parent-icon></span></a>
<div class="uk-dropdown">…</div>
</li>
</ul><nav uk-dropnav>
<ul class="uk-subnav">
<li class="uk-active"><a href="#">Active</a></li>
<li>
<a href>Parent <span uk-drop-parent-icon></span></a>
<div class="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><a href="#">Item</a></li>
</ul>
</div>
</li>
<li>
<a href>Parent <span uk-drop-parent-icon></span></a>
<div class="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><a href="#">Item</a></li>
</ul>
</div>
</li>
<li><a href="#">Item</a></li>
</ul>
</nav>下拉導覽和標籤頁
下拉導覽很容易套用至標籤頁元件。
<nav uk-dropnav>
<ul class="uk-tab">…</ul>
<nav><nav uk-dropnav>
<ul class="uk-tab">
<li class="uk-active"><a href="#">Active</a></li>
<li>
<a href>Parent <span uk-drop-parent-icon></span></a>
<div class="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><a href="#">Item</a></li>
</ul>
</div>
</li>
<li>
<a href>Parent <span uk-drop-parent-icon></span></a>
<div class="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><a href="#">Item</a></li>
</ul>
</div>
</li>
<li><a href="#">Item</a></li>
</ul>
</nav>元件選項
任何這些選項都可以套用至元件屬性。使用分號分隔多個選項。瞭解更多
| 選項 | 值 | 預設值 | 描述 |
|---|---|---|---|
align |
字串 | 左 |
下拉選單對齊方式 (left、right、center)。 |
dropbar |
布林值 | false |
啟用或停用下拉條行為。 |
dropbar-anchor |
CSS 選取器 | false |
如果設定，下拉條將插入錨點元素之後。 |
stretch |
布林值、字串 | false |
在兩個軸 (true) 或給定軸 (x、y) 上延展下拉選單。 |
mode |
字串 | click、hover |
以逗號分隔的下拉選單觸發行為模式清單 (click、hover)。 |
delay-show |
數字 | 0 |
在懸停模式下，下拉選單顯示之前的延遲時間 (毫秒)。 |
delay-hide |
數字 | 800 |
在懸停模式下，下拉選單隱藏之前的延遲時間 (毫秒)。 |
boundary |
CSS 選取器 | true |
下拉選單無法超過的區域，導致它翻轉和移動。預設情況下，為最接近的捲動祖先。 |
target |
布林值、CSS 選取器 | false |
下拉選單所定位的元素 (true 代表視窗)。 |
target-x |
布林值、CSS 選取器 | false |
下拉選單所定位到的元素的 X 軸 (true 代表視窗)。 |
target-y |
布林值、CSS 選取器 | false |
下拉選單所定位到的元素的 Y 軸 (true 代表視窗)。 |
offset |
數字 | 0 |
下拉選單偏移量。 |
animation |
字串 | uk-animation-fade |
以空格分隔的動畫名稱。以逗號分隔表示動畫結束。 |
animate-out |
布林值 | false |
在關閉下拉選單時使用動畫。 |
bg-scroll |
布林值 | true |
允許在開啟下拉選單時捲動背景。 |
close-on-scroll |
布林值 | false |
在捲動父捲軸容器時關閉下拉選單。 |
duration |
數字 | 200 |
動畫持續時間。 |
container |
布林值 | false |
透過選取器定義目標容器，以指定下拉選單在 DOM 中的附加位置。 |
JavaScript
瞭解更多關於JavaScript 元件的資訊。
初始化
UIkit.dropnav(element, options);事件
下列事件將在附加此元件的元素上觸發
| 名稱 | 描述 |
|---|---|
beforeshow |
在顯示項目之前觸發。可以透過在事件上呼叫 preventDefault() 來防止顯示。 |
show |
在顯示項目之後觸發。 |
shown |
在完成項目的顯示動畫之後觸發。 |
beforehide |
在隱藏項目之前觸發。可以透過在事件上呼叫 preventDefault() 來防止隱藏。 |
hide |
在項目的隱藏動畫開始之後觸發。 |
hidden |
在隱藏項目之後觸發。 |
輔助功能
下拉導覽元件遵循「揭露導覽選單」WAI-ARIA 設計模式，並會自動設定適當的 WAI-ARIA 狀態和屬性。
- 導覽項目和切換項目具有
aria-expanded狀態和aria-haspopup屬性。 - 切換項目也具有
aria-label屬性。
鍵盤互動
可以使用下列按鍵透過鍵盤存取下拉導覽元件。
- tab 或 shift+tab 鍵將焦點放置在下拉導覽內部或外部。
- 左/右箭頭 鍵在下拉導覽項目中瀏覽。在懸停模式下，下拉選單會自動開啟。如果焦點在最後一個項目上，則會移動到第一個項目。
- enter 或 space 鍵會開啟和關閉焦點下拉導覽項目的下拉選單。
- 上/下箭頭 鍵在下拉選單中的導覽項目中瀏覽。如果焦點在最後一個項目上，則會移動到第一個項目。
- esc 鍵會關閉任何下拉選單，即使焦點已移動到另一個元素。
國際化
切換項目元件使用下列翻譯字串。瞭解更多關於翻譯元件的資訊。
| 金鑰 | 預設值 | 描述 |
|---|---|---|
label |
開啟選單 |
aria-label 屬性。 |