导航菜单

为列表导航菜单定义不同的风格样式。

默认

使用这个组件,添加 nav 类到一个 <ul> 元素中。使用 <a> 元素作为列表中的菜单项。要对一个菜单项应用选中状态的效果,添加 active 类即可。

示例

代码

<ul class="nav nav-aside">
    <li class="active"><a href="#">激活</a></li>
    <li><a href="#">条目</a></li>
    ...
</ul>

嵌套导航

你可以很容易向菜单导航添加任意数量的 <ul> 元素。

示例

代码

<ul class="nav nav-aside">
    <li class="active"><a href="">激活</a></li>
    <li class="nav-parent open">
        <a href="#">父级菜单</a>
        <ul class="nav-sub">
            <li><a href="">子条目</a></li>
            <li><a href="">子条目</a>
                <ul>
                    <li><a href="">子条目</a></li>
                    <li><a href="">子条目</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

导航菜单折叠

默认情况下,子菜单项总是隐藏的。若要应用折叠效果,只需给主 <ul> 元素添加 data-nav 属性。当点击一个父菜单项时,会关闭已经展开的菜单项,每次只允许展开一个嵌套的菜单。若要避免这种情况,只需附加 {multiple:true} 到 data 属性。

示例

代码

<ul class="nav nav-aside" data-nav>
    ...
</ul>

<ul class="nav nav-aside" data-nav="{multiple:true}">
    ...
</ul>

标题和分隔线

为菜单项添加下面这些类中的一个,创建菜单项中的标题或分隔线。

示例

代码

<ul class="nav nav-aside" data-nav>
    <li class="nav-header">标题</li>
    <li class="active">
        <a href="">条目
            <div>副标题</div>
        </a>
    </li>
    ...
    <li class="nav-divider"></li>
    ...
</ul>

面板中的导航菜单

示例

代码

<div class="panel panel-box">
    <h4 class="panel-body-title">...</h4>
    <ul class="nav nav-aside">
        ...
    </ul>
</div>

下拉导航菜单

示例

代码

<div class="btn-dropdown" data-dropdown>
    <button class="btn">...<i class="icon-caret-down"></i></button>
    <div class="dropdown">
        <ul class="nav nav-dropdown" data-nav> 
            ...
        </ul>
    </div>
</div>

导航栏中的菜单

示例

代码

<nav class="navbar">
    <ul class="navbar-nav">
        <li class="parent" data-dropdown>
            <a href="">...</a>
            <div class="dropdown dropdown-navbar">
                <ul class="nav nav-navbar">
                    ...
                </ul>
            </div>
        </li>
    </ul>
    ...
</nav>

抽屉中的导航菜单

示例

代码

<button class="btn" data-offcanvas="{target:'#offcanvas-1'}">抽屉</button>
<div id="offcanvas-1" class="offcanvas">
    <div class="offcanvas-bar">
        <ul class="nav nav-offcanvas" data-nav> 
            ...
        </ul>
    </div>
</div>