# 導航菜單 為列表導航菜單定義不同的風格樣式。 ## 用法 使用這個組件，添加 `.uk-nav` 類到一個 `&lt;ul&gt;` 元素中。使用 `&lt;a&gt;` 元素作為列表中的菜單項。要對一個菜單項應用選中狀態的效果，添加 `.uk-active` 類即可。 ### 示例  注意 默認情況下，導航菜單沒有任何樣式。這就是為什么要添加一些具有樣式的修飾類，這是很重要的，在例子中我們使用了 `.uk-nav-side` 類。 ### Code ``` <ul class="uk-nav"> <li><a href="">...</a></li> <li class="uk-active"><a href="">...</a></li> </ul> ``` * * * ### 嵌套導航 你可以很容易向菜單導航添加任意數量的 `&lt;ul&gt;` 元素。 | Class | 描述 | | --- | --- | | `.uk-nav-sub` | 在第一個嵌套的 `&lt;ul&gt;` 中添加這個類，使其擁有最佳的間距。 | | `.uk-parent` | 添加這個類來表示一個父菜單項。 | | `.uk-nav-parent-icon` | 給導航菜單添加這個類，可以使父菜單項增加圖標。 | #### 示例  #### Code ``` <ul class="uk-nav uk-nav-parent-icon"> <li class="uk-parent"><a href="">...</a> <ul class="uk-nav-sub"> <li><a href="">...</a> <ul>...</ul> </li> </ul> </li> </ul> ``` * * * ### 手風琴 默認情況下，子菜單項總是可見的。若要應用手風琴效果，只需給主 `&lt;ul&gt;` 元素添加 `data-uk-nav` 屬性。當點擊一個父菜單項時，會關閉已經展開的菜單項，每次只允許展開一個嵌套的菜單。若要避免這種情況，只需附加 `{multiple:true}` 到 data 屬性。 ### 示例  ### Code ``` <ul class="uk-nav uk-nav-parent-icon" data-uk-nav> <li class="uk-parent"> <a href="">...</a> <ul class="uk-nav-sub"> <li><a href="">...</a></li> <li><a href="">...</a></li> </ul> </li> </ul> ``` ``` <ul class="uk-nav uk-nav-parent-icon" data-uk-nav="{multiple:true}"> <li class="uk-parent"> <a href="">...</a> <ul class="uk-nav-sub"> <li><a href="">...</a></li> <li><a href="">...</a></li> </ul> </li> </ul> ``` * * * ### 標題和分隔線 為菜單項添加下面這些類中的一個，創建菜單項中的標題或分隔線。 | Class | 描述 | | --- | --- | | `.uk-nav-header` | 添加這個類到一個 `&lt;li&gt;` 元素創建一個標題。 | | `.uk-nav-divider` | 添加這個類到一個 `&lt;li&gt;` 元素，在單獨的菜單項之間創建一個分割線。 | 注意 你還可以給菜單項添加副標題。只需在菜單項的 `&lt;a&gt;` 元素里面創建一個 `&lt;div&gt;` 元素。 #### 示例  #### Code ``` <li class="uk-nav-header">...</li> <li class="uk-nav-divider"></li> ``` * * * ## 樣式修飾 這里有一些修飾類，根據使用對象的上下文賦予導航菜單適當的樣式。 ### 側邊欄導航菜單 添加 `.uk-nav-side` 類，將導航菜單放置到側邊欄、面板或者網頁中任意其他位置。 #### Example  #### Markup ``` <div class="uk-panel uk-panel-box"> <h3 class="uk-panel-title">...</h3> <ul class="uk-nav uk-nav-side">...</ul> </div> ``` * * * ### 下拉導航菜單 添加 `.uk-nav-dropdown` 類，將導航菜單放置到一個 [下拉菜單組件](dropdown.html "Dropdown") 中的默認下拉菜單中。 #### 示例  #### Code ``` <div class="uk-dropdown"> <ul class="uk-nav uk-nav-dropdown">...</ul> </div> ``` * * * ### 導航欄中的導航菜單 添加 `.uk-nav-navbar` 類，將導航菜單放置到一個 [導航欄組件](navbar.html "Navbar") 中的導航欄下拉菜單中。 #### 示例  #### Code ``` <div class="uk-dropdown uk-dropdown-navbar"> <ul class="uk-nav uk-nav-navbar">...</ul> </div> ``` * * * ### 抽屜組件中的導航菜單 添加 `.uk-nav-offcanvas` 類，將導航菜單放置到 [抽屜組件](offcanvas.html "Off-canvas component") 里的側邊欄彈出式畫布中。 #### 示例  #### Code ``` <div class="uk-offcanvas-bar"> <ul class="uk-nav uk-nav-offcanvas">...</ul> </div> ```