导航菜单／Nav

# 导航菜单／Nav

<p class="uk-text-lead">为列表导航菜单定义各种样式。</p>

## Usage-用法

要应用此组件，请使用以下class。

| Class         | 描述         |
|:--------------|:---------------------|
| `.uk-nav`     | 添加到 `<ul>` 元素中定义导航菜单组件。将 `<a>` 元素用作列表中的导航项。 |
| `.uk-active ` | 添加到列表项应用激活活动状态效果。    |

```html
<ul class="uk-nav">
    <li class="uk-active"><a href=""></a></li>
    <li><a href=""></a></li>
</ul>
```

```example
<div class="uk-width-1-2@s uk-width-2-5@m">
    <ul class="uk-nav uk-nav-default">
        <li class="uk-active"><a href="#">Active</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
    </ul>
</div>
```

**注意** 默认情况下，导航没有样式。因此添加修饰class非常重要。在示例中，我们使用 `.uk-nav-default` class。

***

## Nested navs-导航菜单嵌套

在导航单元上添加 `.uk-parent`class，使其变成父元素。在该元素内的  `<ul>` 上添加`.uk-nav-sub` class创建子级导航。

```html
<ul class="uk-nav">
    <li class="uk-parent">
        <a href=""></a>
        <ul class="uk-nav-sub">
            <li><a href=""></a></li>
            <li>
                <a href=""></a>
                <ul>...</ul>
            </li>
        </ul>
    </li>
</ul>
```

```example
<div class="uk-width-1-2@s uk-width-2-5@m">
    <ul class="uk-nav uk-nav-default">
        <li class="uk-active"><a href="#">Active</a></li>
        <li class="uk-parent">
            <a href="#">Parent</a>
            <ul class="uk-nav-sub">
                <li><a href="#">Sub item</a></li>
                <li>
                    <a href="#">Sub item</a>
                    <ul>
                        <li><a href="#">Sub item</a></li>
                        <li><a href="#">Sub item</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>
```


***

## Accordion-手风琴

默认情况下，子菜单项始终可见状态。要应用手风琴效果，只需将 `uk-nav` 属性添加到主 `<ul>`. Add the `.uk-nav-parent-icon` class为父级项应用图标。

**注意** NOTE 该属性会自动添加 `.uk-nav` class，因此您无需再手动添加。

```html
<ul class="uk-nav-parent-icon" uk-nav>...</ul>
```

```example
<div class="uk-width-1-2@s uk-width-2-5@m">
    <ul class="uk-nav-default uk-nav-parent-icon" uk-nav>
        <li class="uk-active"><a href="#">Active</a></li>
        <li class="uk-parent">
            <a href="#">Parent</a>
            <ul class="uk-nav-sub">
                <li><a href="#">Sub item</a></li>
                <li>
                    <a href="#">Sub item</a>
                    <ul>
                        <li><a href="#">Sub item</a></li>
                        <li><a href="#">Sub item</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li class="uk-parent">
            <a href="#">Parent</a>
            <ul class="uk-nav-sub">
                <li><a href="#">Sub item</a></li>
                <li><a href="#">Sub item</a></li>
            </ul>
        </li>
    </ul>
</div>
```

***

### 多个打开的子导航

点击父级导航时，在展开它下面子级导航的同时会将其他地方已展开的子菜单关闭，即同时刻只允许展开一个嵌套的列表。如需要同时展开多个子级导航，需要为属性添加 `multiple: true` 选项。

```html
<ul class="uk-nav-parent-icon" uk-nav="multiple: true">...</ul>
```

```example
<div class="uk-width-1-2@s uk-width-2-5@m">
    <ul class="uk-nav-default uk-nav-parent-icon" uk-nav="multiple: true">
        <li class="uk-active"><a href="#">Active</a></li>
        <li class="uk-parent">
            <a href="#">Parent</a>
            <ul class="uk-nav-sub">
                <li><a href="#">Sub item</a></li>
                <li>
                    <a href="#">Sub item</a>
                    <ul>
                        <li><a href="#">Sub item</a></li>
                        <li><a href="#">Sub item</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li class="uk-parent">
            <a href="#">Parent</a>
            <ul class="uk-nav-sub">
                <li><a href="#">Sub item</a></li>
                <li><a href="#">Sub item</a></li>
            </ul>
        </li>
    </ul>
</div>
```

***

## Header & divider-标题 & 分隔线

将以下class添加到列表项，来创建标题和项目之间的分隔符。

| 元素           | 描述                                                                  |
|:------------------|:-----------------------------------------------------------------------------|
| `.uk-nav-header`  | 添加到 `<li>` 创建标题                      |
| `.uk-nav-divider` | 添加到 `<li>` 元素创建项目之间的分割线 |

```html
<li class="uk-nav-header"></li>

<li class="uk-nav-divider"></li>
```

```example
<div class="uk-width-1-2@s uk-width-2-5@m">
    <ul class="uk-nav uk-nav-default">
        <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>
```

***

## Default modifier-默认样式

添加 `.uk-nav-default` class给导航应用默认样式。你可以把导航放在卡片内或者内容里的任何位置。

```html
<ul class="uk-nav uk-nav-default">...</ul>
```

```example
<div class="uk-card uk-card-default uk-card-body uk-width-1-2@s">
    <ul class="uk-nav-default uk-nav-parent-icon" uk-nav>
        <li class="uk-active"><a href="#">Active</a></li>
        <li class="uk-parent">
            <a href="#">Parent</a>
            <ul class="uk-nav-sub">
                <li><a href="#">Sub item</a></li>
                <li><a href="#">Sub item</a></li>
            </ul>
        </li>
        <li class="uk-parent">
            <a href="#">Parent</a>
            <ul class="uk-nav-sub">
                <li><a href="#">Sub item</a></li>
                <li><a href="#">Sub item</a></li>
            </ul>
        </li>
        <li class="uk-nav-header">Header</li>
        <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
        <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
        <li class="uk-nav-divider"></li>
        <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
    </ul>
</div>
```

***

## Primary modifier-增强效果

添加`.uk-nav-primary` class使导航具有更独特的样式，例如将其放在模态对话框中时。

```html
<ul class="uk-nav uk-nav-primary">...</ul>
```

```example
<div class="uk-width-1-2@s">
    <ul class="uk-nav-primary uk-nav-parent-icon" uk-nav>
        <li class="uk-active"><a href="#">Active</a></li>
        <li class="uk-parent">
            <a href="#">Parent</a>
            <ul class="uk-nav-sub">
                <li><a href="#">Sub item</a></li>
                <li><a href="#">Sub item</a></li>
            </ul>
        </li>
        <li class="uk-parent">
            <a href="#">Parent</a>
            <ul class="uk-nav-sub">
                <li><a href="#">Sub item</a></li>
                <li><a href="#">Sub item</a></li>
            </ul>
        </li>
        <li><a href="#">Item</a></li>
    </ul>
</div>
```

***

## Center modifier-居中

将 `.uk-nav-center`  class添加到导航项使其居中，可以与默认样式和增强样式结合使用。

```html
<ul class="uk-nav uk-nav-default uk-nav-center">...</ul>
```

```example
<div class="uk-card uk-card-default uk-card-body uk-width-1-2@s">
    <ul class="uk-nav-default uk-nav-center" uk-nav>
        <li class="uk-active"><a href="#">Active</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
    </ul>
</div>
```

***

## Divider modifier-分隔线修饰

添加 `.uk-nav-divider` class可以以用行分隔导航中的项目。可以与nav组件的默认样式uk-nav-default和增强样式uk-nav-primary结合起来使用。

```html
<ul class="uk-nav uk-nav-default uk-nav-divider">...</ul>
```

```example
<div class="uk-width-1-2@s">
    <ul class="uk-nav-default uk-nav-divider" uk-nav>
        <li class="uk-active"><a href="#">Active</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
    </ul>
</div>
```

***

## Nav in Dropdown-下拉导航菜单

添加 `.uk-dropdown-nav` class 以将导航菜单放入 [Dropdown 组件](dropdown.md)的下拉列表中。

```html
<div uk-dropdown>
    <ul class="uk-nav uk-dropdown-nav">...</ul>
</div>
```

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

***

## Nav in Navbar-导航栏中的导航菜单

添加 `.uk-navbar-dropdown-nav` class，将导航放在 [Navbar 组件](navbar.md)的下拉菜单中。

```html
<div class="uk-navbar-dropdown">
    <ul class="uk-nav uk-navbar-dropdown-nav">...</ul>
</div>
```

```example
<nav class="uk-navbar-container" uk-navbar>
    <div class="uk-navbar-left">

        <ul class="uk-navbar-nav">
            <li>
                <a href="#">Parent</a>
                <div class="uk-navbar-dropdown">
                    <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>
</nav>
```

***

## Nav in Offcanvas-抽屉组件中的导航菜单

可以在[Off-canvas 组件](offcanvas.md)的抽屉内直接使用，无需额外添加class样式。

```example
<a href="#offcanvas-slide" class="uk-button uk-button-default" uk-toggle>Open</a>

<div id="offcanvas-slide" uk-offcanvas>
    <div class="uk-offcanvas-bar">

        <ul class="uk-nav uk-nav-default">
            <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>
```

***

## Component options-组件选项

下列选项中的任何一个都可以应用于组件属性。用分号分隔多个选项。 [了解更多](javascript.md#component-configuration)

| 选项        | 可用值        | 默认值        | 描述            |
|:--------------|:-------------|:---------------|:--------------------------------------------|
| `targets`     | CSS selector | `> .uk-parent` | 添加此class 到切换子菜单的元素     |
| `toggle `     | CSS selector | `> a`          | 用于切换子菜单的元素    |
| `content`     | CSS selector | `> ul`         | 内容元素   |
| `collapsible` | Boolean      | `true`         | 允许收缩所有菜单     |
| `multiple`    | Boolean      | `false`        | 允许同时展开多个菜单        |
| `transition`  | String       | `ease`         | 使用过渡效果。          |
| `animation`   | String       | `true`         | 用空格隔开多个动画的名称。逗号后是隐藏元素时淡出效果的动画 |
| `duration`    | Number       | `200`          | 动画持续时间（以毫秒为单位）     |

***

## JavaScript

了解更多关于 [JavaScript 组件](javascript.md#programmatic-use)信息。

### Initialization／初始化

```js
UIkit.nav(element, options);
```

### Methods／方法

以下方法可用于该组件：

#### Toggle／切换

```js
UIkit.nav(element).toggle(index, animate);
```

切换内容面板。

| Name      | 类型                  | 默认值 | 描述                                  |
|:----------|:----------------------|:--------|:---------------------------------------------|
| `index`   | String, Integer, Node | 0       | 导航面板进行切换。从0开始的索引。          |
| `animate` | Boolean               | true    | 导航窗格进行切换。从0开始的索引。 |