By accessing the website and accepting the Cookie Policy, you agree to use the cookies provided by the Site in accordance with to analyze traffic, remember your preferences, and optimize your experience.
uikit导航
2018-10-25 10:26:49    324    0    0
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>

上一篇: uikit抽屉与响应式可见性

下一篇: OctoberCMS快速入门-20-前端表单

324 人读过
文档导航