emengweb
导航
添加 .uk-nav 类到一个 <ul> 元素中。使用 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
添加这个类到 <nav> 元素中，定义导航栏组件。
.uk-navbar-nav
添加这个类到 <ul> 元素来创建导航。使用 <a> 元素作为列表中的菜单项。
.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
添加这个类到一个 <a> 或 <div> 元素中，来表示你的品牌
<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
添加这个类到 <div> 元素中，使它作为一个自定义内容的容器。内容将被垂直居中
uk-navbar-flip
添加 .uk-navbar-flip 类到一个 <div> 元素中，将其进行分组并将导航项对齐到导航栏右侧。
<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 属性的 <div> 元素将其包裹即可。添加 .uk-dropdown 类到一个子级的 <div> 元素来创建下拉菜单本身。
<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>