uikit 导航

导航

添加 .uk-nav 类到一个
元素中。使用 a 元素作为列表中的菜单项。要对一个菜单项应用选中状态的效果，添加 .uk-active 类即可。

默认情况下，导航菜单没有任何样式。这就是为什么要添加一些具有样式的修饰类，这是很重要的，在例子中我们使用了 .uk-nav-side 类。

添加 .uk-nav-side 类，将导航菜单放置到侧边栏、面板或者网页中任意其他位置。

<div class="uk-width-medium-1-1">
<ul class="uk-nav uk-nav-side">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
</div>

导航栏

导航栏组件包括导航栏本身及一个或多个导航菜单。

.uk-navbar

添加这个类到
元素中，定义导航栏组件。

.uk-navbar-nav

添加这个类到 元素来创建导航。使用 元素作为列表中的菜单项。

.uk-active

添加这个类到一个列表项中，对其应用选中的状态。

<header>
<div class="uk-container uk-container-center">
<nav class="uk-navbar">
<ul class="uk-navbar-nav">
<li class="uk-active">
<a href="http://www.mooban.cn/">首页</a>
</li>
<li>
<a href="http://www.mooban.cn/down/">模板</a>
</li>
<li>
<a href="http://www.mooban.cn/original/">原创</a>
</li>
<li>
<a href="http://www.mooban.cn/source/">源码</a>
</li>
<li>
<a href="http://www.mooban.cn/plugin/">插件</a>
</li>
</ul>
</nav>
</div>
</header>

header{
background-color:darkseagreen;
}

添加 .uk-container 类到一个块元素中，为其设置一个最大宽度并将网页的主要内容包装在其中。

想要将容器居中，使用 .uk-container-center 类。

uk-navbar-brand

添加这个类到一个 或
元素中，来表示你的品牌

<header>
<div class="uk-container uk-container-center">
<nav class="uk-navbar">
<a class="uk-navbar-brand" href="http://www.mooban.cn/" title="魔工坊">
<img src="http://www.mooban.cn/skin/moob/img/logo.png" alt="魔工坊" width="40" height="40">
</a>
<ul class="uk-navbar-nav">
<li class="uk-active">
<a href="http://www.mooban.cn/">首页</a>
</li>
<li>
<a href="http://www.mooban.cn/down/">模板</a>
</li>
<li>
<a href="http://www.mooban.cn/original/">原创</a>
</li>
<li>
<a href="http://www.mooban.cn/source/">源码</a>
</li>
<li>
<a href="http://www.mooban.cn/plugin/">插件</a>
</li>
</ul>
</nav>
</div>
</header>

uk-navbar-content

添加这个类到
元素中，使它作为一个自定义内容的容器。内容将被垂直居中

uk-navbar-flip

添加 .uk-navbar-flip 类到一个
元素中，将其进行分组并将导航项对齐到导航栏右侧。

<header>
<div class="uk-container uk-container-center">
<nav class="uk-navbar">
<a class="uk-navbar-brand" href="http://www.mooban.cn/" title="魔工坊">
<img src="http://www.mooban.cn/skin/moob/img/logo.png" alt="魔工坊" width="40" height="40">
</a>
<ul class="uk-navbar-nav">
<li class="uk-active">
<a href="http://www.mooban.cn/">首页</a>
</li>
<li>
<a href="http://www.mooban.cn/down/">模板</a>
</li>
<li>
<a href="http://www.mooban.cn/original/">原创</a>
</li>
<li>
<a href="http://www.mooban.cn/source/">源码</a>
</li>
<li>
<a href="http://www.mooban.cn/plugin/">插件</a>
</li>
</ul>

<div class="uk-navbar-content uk-navbar-flip">
<div class="uk-button-group">
<a class="uk-button uk-button-primary uk-margin-right" href="#">免费注册</a>
<a class="uk-button uk-button-primary" href="#">立即登录</a>
</div>
</div>
</nav>
</div>
</header>

下拉菜单

任意内容，比如一个按钮，都可以作为切换器用来切换下拉菜单。只需用一个带 data-uk-dropdown 属性的
元素将其包裹即可。添加 .uk-dropdown 类到一个子级的 元素来创建下拉菜单本身。

<div class="uk-button-dropdown" data-uk-dropdown="">
<button>test</button>
<div class="uk-dropdown">
<ul class="uk-nav uk-nav-dropdown">
<li>
<a href="http://www.mooban.cn/down/">模板</a>
</li>
<li>
<a href="http://www.mooban.cn/original/">原创</a>
</li>
</ul>
</div>
</button>
</div>

创建以上效果有几个必要条件：

1.要触发下拉菜单的按钮需要用一个div包裹，并且该div需要加上uk-button-dropdown类和data-uk-dropdown属性。

2.按钮的下面要添加一个div元素代表真正的下拉菜单，该div需要加上uk-dropdown类。

3.第2步中的div中需要放一个ul子元素，该ul需要加上uk-nav和uk-nav-dropdown类。

带有下拉菜单的导航栏

1.uk-parent 给列表元素添加这个类来表示一个父级菜单项。

2.data-uk-dropdown 给列表元素添加这个属性

3.代表真正的下拉菜单的div元素除了要添加uk-dropdown类之外，还要添加一个uk-dropdown-navbar类。

<li class="uk-parent" data-uk-dropdown>
<a href="http://www.mooban.cn/down/">模板</a>
<div class="uk-dropdown uk-dropdown-navbar" style="width: 200px;">
<ul class="uk-nav uk-nav-dropdown uk-panel">
<li class="uk-nav-header">网站</li>
<li><a href="http://www.mooban.cn/down/dt-c5-1.html" target="_blank">Destoon</a></li>
<li><a href="http://www.mooban.cn/down/wp-c48-1.html" target="_blank">WordPress</a></li>
<li><a href="http://www.mooban.cn/down/dede-c31-1.html" target="_blank">DeDeCMS</a></li>
<li><a href="http://www.mooban.cn/down/ec-c7-1.html" target="_blank">ECShop</a></li>
<li><a href="http://www.mooban.cn/down/dz-c56-1.html" target="_blank">Discuz</a></li>
<li><a href="http://www.mooban.cn/down/static-c143-1.html" target="_blank">HTML</a></li>
<li><a href="http://www.mooban.cn/down/qita-c225-1.html" target="_blank">其他模板</a></li>
</ul>
</div>
</li>

带有多列下拉菜单的导航栏

<li class="uk-parent" data-uk-dropdown>
<a href="http://www.mooban.cn/down/">模板</a>
<div class="uk-dropdown uk-dropdown-width-2 uk-dropdown-navbar" style="width: 200px;">
<div class="uk-grid uk-dropdown-grid">
<div class="uk-width-1-2">
<ul class="uk-nav uk-nav-dropdown uk-panel">
<li class="uk-nav-header">网站</li>
<li><a href="http://www.mooban.cn/down/dt-c5-1.html" target="_blank">Destoon</a></li>
<li><a href="http://www.mooban.cn/down/wp-c48-1.html" target="_blank">WordPress</a></li>
<li><a href="http://www.mooban.cn/down/dede-c31-1.html" target="_blank">DeDeCMS</a></li>
<li><a href="http://www.mooban.cn/down/ec-c7-1.html" target="_blank">ECShop</a></li>
<li><a href="http://www.mooban.cn/down/dz-c56-1.html" target="_blank">Discuz</a></li>
<li><a href="http://www.mooban.cn/down/static-c143-1.html" target="_blank">HTML</a></li>
<li><a href="http://www.mooban.cn/down/qita-c225-1.html" target="_blank">其他模板</a></li>
</ul>
</div>
<div class="uk-width-1-2">
<ul class="uk-nav uk-nav-dropdown uk-panel">
<li class="uk-nav-header">APP</li>
<li><a href="http://www.mooban.cn/down/app-c6-1.html" target="_blank">AppCan</a></li>
<li><a href="http://www.mooban.cn/down/ecm-c33-1.html" target="_blank">ECMobile</a></li>
<li><a href="http://www.mooban.cn/down/ect-c66-1.html" target="_blank">ECTouch</a></li>
<li><a href="http://www.mooban.cn/down/pg-c65-1.html" target="_blank">PhoneGap</a></li>
<li><a href="http://www.mooban.cn/down/web-c64-1.html" target="_blank">WebAPP</a></li>
<li><a href="http://www.mooban.cn/down/api-c32-1.html" target="_blank">APICloud</a></li>
<li><a href="http://www.mooban.cn/down/React-c227-1.html" target="_blank">React</a></li>
</ul>
</div>
</div>
</div>
</li>