下拉橫幅
建立一個可切換的、全寬區塊，稱為下拉橫幅。
下拉橫幅元件為下拉元件提供類似區塊的樣式。與下拉選單定位在頁面上的任何位置，四周都有間距相反，下拉橫幅會延伸至視窗的全寬或全高，因此它完美地貼合三個邊緣，沒有間距。
下拉橫幅元件是目標感知的。這表示只要滑鼠指標朝下拉橫幅移動，下拉橫幅就會保持開啟。額外的延遲確保即使滑鼠指標短暫地朝另一個方向移動，下拉橫幅仍保持開啟。如果開啟另一個下拉橫幅，則下拉橫幅會立即關閉。
用法
若要套用此元件，請新增 .uk-dropbar 類別，並新增一個修飾符類別，表示下拉橫幅出現的方向，例如 .uk-dropbar-top。
<div class="uk-dropbar uk-dropbar-top"></div>此外，將 uk-drop 屬性新增至下拉橫幅，並在前面新增一個切換元素。任何內容 (例如按鈕) 都可以切換下拉元件。由於下拉橫幅在視覺上需要延伸至視窗的全寬或全高，請將 stretch: true 選項新增至 uk-drop 屬性。若只要延伸至一個軸，請使用 stretch: x 或 stretch: y。如需所有動畫詳細資訊，請參閱下拉元件。
<button type="button"></button>
<div class="uk-dropbar uk-dropbar-top" uk-drop="stretch: x"></div><div class="uk-overflow-auto uk-height-medium">
<div class="uk-inline">
<button class="uk-button uk-button-default" type="button">Hover</button>
<div class="uk-dropbar uk-dropbar-top" uk-drop="stretch: x">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</div>
</div>
下拉橫幅通常與導覽列元件一起使用。
<div class="uk-overflow-auto uk-height-medium">
<nav class="uk-navbar-container">
<div class="uk-container">
<div uk-navbar>
<div class="uk-navbar-left">
<ul class="uk-navbar-nav">
<li>
<a class="uk-navbar-toggle uk-navbar-toggle-animate" href uk-navbar-toggle-icon></a>
<div class="uk-dropbar uk-dropbar-top" uk-drop="stretch: x">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</li>
</ul>
</div>
</div>
</div>
</nav>
</div>請注意，在導覽列元件和下拉導覽元件中，有多個下拉橫幅的專用實作。
方向
若要設定適當的下拉橫幅樣式，請新增下列方向修飾符類別之一。
| 方向 | 說明 |
|---|---|
uk-dropbar-top |
從頂部開啟下拉橫幅。 |
uk-dropbar-bottom |
從底部開啟下拉橫幅。 |
uk-dropbar-left |
從左側開啟下拉橫幅。 |
uk-dropbar-right |
從右側開啟下拉橫幅。 |
若要從特定方向開啟下拉橫幅，請使用下拉元件的 pos 和 stretch 選項。
| 位置 | 說明 |
|---|---|
pos: top-left; stretch: x |
將下拉橫幅定位在切換上方，並水平延伸。 |
pos: bottom-left; stretch: x |
將下拉橫幅定位在切換下方，並水平延伸 |
pos: left-top; stretch: y |
將下拉橫幅定位在切換的左側，並垂直延伸 |
pos: right-top; stretch: y |
將下拉橫幅定位在切換的右側，並垂直延伸 |
<div class="uk-dropbar uk-dropbar-left" uk-drop="pos: left-top; stretch: y"></div><div class="uk-overflow-auto uk-height-medium">
<nav class="uk-navbar-container">
<div class="uk-container">
<div uk-navbar>
<div class="uk-navbar-left">
<ul class="uk-navbar-nav">
<li>
<a href>Top</a>
<div class="uk-dropbar uk-dropbar-top" uk-drop="stretch: x; target: !.uk-navbar-container">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</li>
<li>
<a href>Left</a>
<div class="uk-dropbar uk-dropbar-left" uk-drop="stretch: y; target: !.uk-navbar-container">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
</li>
<li>
<a href>Right</a>
<div class="uk-dropbar uk-dropbar-right" uk-drop="pos: bottom-right; stretch: y; target: !.uk-navbar-container">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
</li>
</ul>
</div>
</div>
</div>
</nav>
</div>動畫
若要設定下拉橫幅的動畫，請使用下拉元件的 slide-* 或 reveal-* 動畫。slide-* 動畫會將下拉橫幅及其內容從選定的方向滑入，而在 reveal-* 動畫中，下拉橫幅的內容保持靜態，並從選定的方向顯示。設定 animate-out: true，以便在關閉下拉橫幅時也顯示動畫。
| 動畫 | 說明 |
|---|---|
slide-top |
從頂部滑入下拉橫幅。 |
slide-bottom |
從底部滑入下拉橫幅。 |
slide-left |
從左側滑入下拉橫幅。 |
slide-right |
從右側滑入下拉橫幅。 |
reveal-top |
從頂部顯示下拉橫幅。 |
reveal-bottom |
從底部顯示下拉橫幅。 |
reveal-left |
從左側顯示下拉橫幅。 |
reveal-right |
從右側顯示下拉橫幅。 |
<div uk-drop="animation: slide-top; animate-out: true"></div><div class="uk-overflow-auto uk-height-medium">
<nav class="uk-navbar-container">
<div class="uk-container">
<div uk-navbar>
<div class="uk-navbar-left">
<ul class="uk-navbar-nav">
<li>
<a href>Slide Top</a>
<div class="uk-dropbar uk-dropbar-top" uk-drop="stretch: x; target: !.uk-navbar-container; animation: slide-top; animate-out: true; duration: 700">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</li>
<li>
<a href>Reveal Top</a>
<div class="uk-dropbar uk-dropbar-top" uk-drop="stretch: x; target: !.uk-navbar-container; animation: reveal-top; animate-out: true; duration: 700">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</li>
<li>
<a href>Slide Left</a>
<div class="uk-dropbar uk-dropbar-left" uk-drop="stretch: y; target: !.uk-navbar-container; animation: slide-left; animate-out: true; duration: 700">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
</li>
<li>
<a href>Reveal Left</a>
<div class="uk-dropbar uk-dropbar-left" uk-drop="stretch: y; target: !.uk-navbar-container; animation: reveal-left; animate-out: true; duration: 700">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
</li>
<li>
<a href>Slide Right</a>
<div class="uk-dropbar uk-dropbar-right" uk-drop="pos: bottom-right; stretch: y; target: !.uk-navbar-container; animation: slide-right; animate-out: true; duration: 700">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
</li>
<li>
<a href>Reveal Right</a>
<div class="uk-dropbar uk-dropbar-right" uk-drop="pos: bottom-right; stretch: y; target: !.uk-navbar-container; animation: reveal-right; animate-out: true; duration: 700">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
</li>
</ul>
</div>
</div>
</div>
</nav>
</div>下拉橫幅中的導覽
下拉橫幅可以包含導覽元件中的導覽。只需將 .uk-nav 類別新增至 <ul> 元素，並使用下拉選單元件中的相同 .uk-dropdown-nav 修飾符即可擁有相同的導覽樣式。
<button type="button"></button>
<div class="uk-dropbar uk-dropbar-top" uk-drop="stretch: x">
<ul class="uk-nav uk-dropdown-nav">…</ul>
</div><div class="uk-overflow-auto uk-height-large">
<nav class="uk-navbar-container">
<div class="uk-container">
<div uk-navbar>
<div class="uk-navbar-left">
<ul class="uk-navbar-nav">
<li>
<a href>Hover</a>
<div class="uk-dropbar uk-dropbar-top" uk-drop="stretch: x">
<ul class="uk-nav uk-navbar-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>
</div>
</div>
</nav>
</div>大型修飾符
新增 .uk-dropbar-large 類別，以便為下拉橫幅提供較大的垂直內距。
<div class="uk-dropbar uk-dropbar-top uk-dropbar-large" uk-drop="stretch: x"></div><div class="uk-overflow-auto uk-height-large">
<nav class="uk-navbar-container">
<div class="uk-container">
<div uk-navbar>
<div class="uk-navbar-left">
<ul class="uk-navbar-nav">
<li>
<a href>Hover</a>
<div class="uk-dropbar uk-dropbar-top uk-dropbar-large" uk-drop="stretch: x">
<ul class="uk-nav uk-navbar-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>
</div>
</div>
</nav>
</div>無障礙
下拉元件遵循選單按鈕 WAI-ARIA 設計模式，並自動設定適當的 WAI-ARIA 角色、狀態和屬性。
- 切換具有
button角色、aria-expanded狀態和aria-haspopup屬性。
鍵盤互動
可以使用下列按鍵透過鍵盤存取下拉元件。
- enter 或 space 鍵會開啟和關閉下拉選單。
- 即使焦點已移動到另一個元素，esc 鍵仍會關閉下拉選單。