下拉菜單 · UIkit 中文文檔

# 下拉菜單為可撥動的下拉菜單定義不同的樣式 ## 用法任意內容，比如一個按鈕，都可以作為切換器用來切換下拉菜單。只需用一個帶 `data-uk-dropdown` 屬性的 `<div>` 元素將其包裹即可。添加 `.uk-dropdown` 類到一個子級的 `<div>` 元素來創建下拉菜單本身。一個下拉菜單可以通過鼠標懸停或者的點擊的方式來撥動。 | Data 屬性 | 描述 | | --- | --- | | `data-uk-dropdown` | 鼠標懸停打開下拉菜單，并添加一個很小的延遲，這樣下拉菜單便不會在你停止在撥動器上懸停時立即消失。 | | `data-uk-dropdown="{mode:'click'}"` | 通過點擊撥動器來打開下拉菜單，再次點擊，下拉菜單便關閉。 | 重要為了應用一個下拉菜單，其父元素擁有一個能恰當地將二者對齊的相對位置是很重要的。很多組件默認地創建了這樣的定位場景，比如 [按鈕](button.html "Button")，[導航欄](navbar.html "Navbar")，[二級導航](subnav.html "Subnav") 和 [選項卡](tab.html "Tab") 等組件。 ### 示例 ![](https://box.kancloud.cn/2016-05-12_57346f36a58ea.jpg) 注意在這個例子理我們使用了 [按鈕組件](button.html "Button component") 作為撥動器。 ### Code ```  <div data-uk-dropdown>  <div>...</div>  <div class="uk-dropdown">...</div> </div>  <div data-uk-dropdown="{mode:'click'}">  <div>...</div>  <div class="uk-dropdown">...</div> </div> ``` * * * ### 在懸停模式下延遲下拉菜單你可以設置一個以毫秒為單位的 `delay` 參數來防止下拉菜單立即顯示出來。 ![](https://box.kancloud.cn/2016-05-12_57346f36b6528.jpg) #### Code ``` <div class="uk-dropdown" data-uk-dropdown="{delay: 1000}"> ... </div> ``` * * * ### 帶有導航菜單的下拉菜單下拉菜單可以包含一個 [導航菜單](nav.html)，只需添加 `.uk-nav` 類和 `.uk-nav-dropdown` 修飾類到一個 `<ul>` 元素中。 #### Code ``` <div class="uk-dropdown"> <ul class="uk-nav uk-nav-dropdown">...</ul> </div> ``` * * * ## 對齊修飾給下拉菜單添加對齊樣式，只需添加以下`pos:''`參數中的一個到 data屬性就行了。 | 參數 | 描述 | | --- | --- | | `pos:'bottom-left'` | 默認。下方左對齊 | | `pos:'bottom-center'` | 下方居中對齊 | | `pos:'bottom-right'` | 下方右對齊 | | `pos:'top-left'` | 上方左對齊 | | `pos:'top-center'` | 上方居中對齊 | | `pos:'top-right'` | 上方右對齊 | | `pos:'left-top'` | 左側頂部對齊 | | `pos:'left-center'` | 左側垂直居中對齊 | | `pos:'left-bottom'` | 左側底部對齊 | | `pos:'right-top'` | 右側頂部對齊 | | `pos:'right-center'` | 右側垂直居中對齊 | | `pos:'right-bottom'` | 右側底部對齊 | ### Example ![](https://box.kancloud.cn/2016-05-12_57346f36c6a6a.jpg) ### Markup ``` <div data-uk-dropdown="{pos:'bottom-center'}"> ... </div> <div data-uk-dropdown="{pos:'top-right'}"> ... </div> <div data-uk-dropdown="{pos:'left-center'}"> ... </div> <div data-uk-dropdown="{pos:'right-top'}"> ... </div> ``` * * * ### 調整下拉菜單調整下拉菜單，只需添加 `data-uk-dropdown="{justify:'#ID'}"`屬性。需要調整的下拉菜單的父元素需要有一個標記id，這樣下拉菜單便會擴寬度至這個被標記的元素的寬度。 #### 示例 ![](https://box.kancloud.cn/2016-05-12_57346f36dddf8.jpg) #### Markup ```  <div id="my-id">  <div class="uk-button-dropdown" data-uk-dropdown="{justify:'#my-id'}">  <button class="uk-button">...</button>  <div class="uk-dropdown">...</div> </div> </div> ``` * * * ### 下拉菜單自動翻轉默認情況下，當下拉菜單超出了視口邊緣便會自動地翻轉。如果你想根據容器的邊界來翻轉它，只需添加 `data-uk-dropdown="{boundary:'#ID'}"` 屬性，這個屬性中的ID對應容器的ID。 #### 示例 ![](https://box.kancloud.cn/2016-05-12_57346f36efde6.jpg) #### Code ``` <div id="my-id"> <div class="uk-button-dropdown" data-uk-dropdown="{boundary:'#my-id'}">...</div> </div> ``` * * * ## 網格你甚至可以在下拉菜單中放置一個包含導航或者其它內容的 [網格組件](grid.html "Grid component")。只需用一個帶有 `.uk-grid`類的 `<div>` 元素包裹著這些內容。為了優化下拉菜單中的網格，需要添加 `.uk-dropdown-grid` 類名。添加一個 `.uk-dropdown-width-*` 類名到網格的子元素，最多可以并列5個列。 ### Example ![](https://box.kancloud.cn/2016-05-12_57346f370fa60.jpg) Lorem ipsum dolor sit amet, consectetur elit, sed do eiusmod tempor incididunt.Lorem ipsum dolor sit amet, consectetur elit, sed do eiusmod tempor incididunt.Lorem ipsum dolor sit amet, consectetur elit, sed do eiusmod tempor incididunt. ### Markup ``` <div class="uk-dropdown uk-dropdown-width-2"> <div class="uk-grid uk-dropdown-grid"> <div class="uk-width-1-2"> <ul class="uk-nav uk-nav-dropdown uk-panel">...</ul> <div class="uk-panel">...</div> </div> <div class="uk-width-1-2"> <div class="uk-panel">...</div> </div> </div> </div> ``` ### 響應式行為在狹窄的視口中，比如手機上，可能沒有足夠的空間來擴展下拉菜單。在這種情況下，下拉菜單會翻轉它的對齊準線。如果還是沒有足夠的空間，網格列會占滿寬度并在下拉菜單中垂直地堆疊。 * * * ## 縮小調整默認情況下，下拉菜單有一個固定的寬度并且文字會切換到下一行。如果你想要你的下拉菜單更小巧，以使它延伸到內容的寬度而不再使文本換行，添加 `.uk-dropdown-small` 類即可。這對一個按鈕下拉菜單是很有用的。 #### 示例 ![](https://box.kancloud.cn/2016-05-12_57346f371fbf0.jpg) #### Code ``` <div class="uk-dropdown uk-dropdown-small">...</div> ``` * * * ## 可滾動的修飾給下拉菜單添加固定高度，使它的內容可以滾動，只需添加 `.uk-dropdown-scrollable` 類。 ### 示例 ![](https://box.kancloud.cn/2016-05-12_57346f3733f06.jpg) ### Code ``` <div class="uk-dropdown uk-dropdown-scrollable">...</div> ``` * * * ## 導航欄中的修飾下拉菜單是 [導航欄組件](navbar.html "Navbar component") 的基本組成部分。只需添加 `.uk-dropdown-navbar` 類到下拉菜單中，這樣下拉菜單便會完美地融入導航欄中。 ### 示例 ![](https://box.kancloud.cn/2016-05-12_57346f3745270.jpg) ### Code ``` <nav class="uk-navbar"> <ul class="uk-navbar-nav">  <li class="uk-parent" data-uk-dropdown>  <a href="">...</a>  <div class="uk-dropdown uk-dropdown-navbar"> <ul class="uk-nav uk-nav-navbar"> <li><a href="">...</a></li> </ul> </div> </li> </ul> </nav> ``` * * * ## 空白下拉菜單有時你需要用到下拉菜單的功能但不想要它的樣式。這時你直接用 `.uk-dropdown-blank` 來替代 `.uk-dropdown`就行了。 ### Example ![](https://box.kancloud.cn/2016-05-12_57346f3756a8e.jpg) ### Title Lorem ipsum dolor sit amet, consectetur adipisicing elit. NOTE 在這個例子中，我們使用了[面板組件](panel.html)來設定下拉菜單的樣式。 ### Markup ``` <div class="uk-dropdown-blank uk-panel uk-panel-box">...</div> ``` * * * ## 按鈕中的下拉菜單 [按鈕組件](button.html "Button component") 中的按鈕可以用來切換下拉菜單。 ### 示例 ![](https://box.kancloud.cn/2016-05-12_57346f3765ffc.jpg) ### Code ```  <div class="uk-button-dropdown" data-uk-dropdown>  <button class="uk-button">...</button>  <div class="uk-dropdown uk-dropdown-small"> <ul class="uk-nav uk-nav-dropdown"> <li><a href="">...</a></li> <li><a href="">...</a></li> </ul> </div> </div> ``` * * * ### 按鈕組中的下拉菜單使用 [按鈕組件](button.html "Button component") 中的按鈕組，將按鈕分作一個標準的按鈕和一個下拉菜單撥動器。 #### 示例 ![](https://box.kancloud.cn/2016-05-12_57346f3777762.jpg) #### Code ``` <div class="uk-button-group">  <button class="uk-button">...</button>  <div data-uk-dropdown="{mode:'click'}">  <a href="" class="uk-button">...</a>  <div class="uk-dropdown uk-dropdown-small"> <ul class="uk-nav uk-nav-dropdown"> <li><a href="">...</a></li> <li><a href="">...</a></li> </ul> </div> </div> </div> ``` * * * ## 子導航中的下拉菜單下拉菜單也可以用在 [子導航組件](subnav.html "Subnav component") 中。 #### 示例 ![](https://box.kancloud.cn/2016-05-12_57346f37898f4.jpg) #### Code ``` <ul class="uk-subnav uk-subnav-pill"> <li><a href="">...</a></li>  <li data-uk-dropdown="{mode:'click'}">  <a href="">...</a>  <div class="uk-dropdown uk-dropdown-small"> <ul class="uk-nav uk-nav-dropdown"> <li><a href="">...</a></li> </ul> </div> </li> </ul> ``` * * * ## 選項卡中的下拉菜單下拉菜單可以用在 [選項卡組件](tab.html "Tab component") 中。 #### 示例 ![](https://box.kancloud.cn/2016-05-12_57346f379a6e5.jpg) #### Code ``` <ul class="uk-tab" data-uk-tab> <li><a href="">...</a></li>  <li data-uk-dropdown="{mode:'click'}">  <a href="">...</a>  <div class="uk-dropdown uk-dropdown-small"> <ul class="uk-nav uk-nav-dropdown"> <li><a href="">...</a></li> </ul> </div> </li> </ul> ``` * * * ## JavaScript 選項這是關于如何通過屬性設置選項的示例： ``` data-uk-dropdown="{mode:'hover'}" ``` | 選項 | 可用的值 | 默認值 | 描述 | | --- | --- | --- | --- | | `pos` | string | bottom-left | 下拉菜單定位 | | `mode` | hover, click | hover | 觸發下拉菜單的行為 | | `remaintime` | integer | 800 | 懸停模式下，自動關閉下拉菜單前的等待時間 | | `justify` | CSS selector | false | 按指定元素的寬度拉伸下拉菜單 | | `boundary` | window | CSS 選擇器 | 用被標注的元素來保持下拉菜單的可見性 | | `delay` | integer | 0 | 懸停模式下，下拉菜單被顯示前的延遲時間，以毫秒為單位。 | | `hoverDelayIdle` | integer | 250 | 以毫秒為單位的，從一個打開下拉菜單將鼠標移至另一個下拉菜單這一過程中的延時。 | | `preventflip` | mixed | false | 防止下拉菜單自動翻轉 | ### 事件你可以為自定義的功能綁定回調事件。 | 事件名稱 | 描述 | | --- | --- | | `show.uk.dropdown` | 下拉菜單顯示時觸發 | | `hide.uk.dropdown` | 下拉菜單隱藏時觸發 | | `stack.uk.dropdown` | 當下拉菜單堆疊以適應屏幕時觸發 | ### Example ``` $('[data-uk-dropdown]').on('show.uk.dropdown', function(){ // custom code... }); ``` * * * ## CSS 選項添加類名 `.uk-dropdown-close` 到下拉菜單容器或菜單條目，用于點擊該條目時隱藏下拉菜單to dropdown container or to item to hide dropdown when user click on item.