uikit 导航

导航

添加 .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>

image

导航栏

导航栏组件包括导航栏本身及一个或多个导航菜单。
.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;
        }

image

添加 .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>

image

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>

image

下拉菜单

任意内容，比如一个按钮，都可以作为切换器用来切换下拉菜单。只需用一个带 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>