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抽屉与响应式可见性
uikit    2018-10-25 10:26:49    365    0    0
emengweb   uikit

抽屉/Off-canvas

创建一个可以在页面上平滑地滑入滑出的抽屉。
抽屉完美适用于构建移动端导航,与那些颇受欢迎的许多原生手机应用类似,在其左上角用一个按钮来开关带有菜单的侧边栏。

用法

.uk-offcanvas 添加该类至一个<div>元素来创建隐藏在页面外的边栏容器和覆盖层。id也需要添加,使抽屉可被打开或关闭。
.uk-offcanvas-bar 添加该类至一个子级 <div> 元素来创建抽屉式边栏。
你可以使用任何元素来切换抽屉式侧边栏。 a元素需要链接至抽屉容器的id。为了使必要的JavaScript生效,仅需添加data-uk-offcanvas属性即可

<!-- 这是开关抽屉式边栏的锚 -->
<a href="#my-id" data-uk-offcanvas>open</a>

<!-- 抽屉式边栏 -->
<div id="my-id" class="uk-offcanvas">
    <div class="uk-offcanvas-bar">抽屉式边栏</div>
</div>

抽屉式导航

抽屉式侧边栏可以包含导航栏。给ul添加.uk-nav-offcanvas类来根据抽屉的上下文定义导航菜单的样式。

<!-- 这是开关抽屉式边栏的锚 -->
<a href="#my-id" data-uk-offcanvas>open</a>
<!-- 抽屉式边栏 -->
<div id="my-id" class="uk-offcanvas">
    <div class="uk-offcanvas-bar">
        <ul class="uk-nav uk-nav-offcanvas">
            <li class="uk-active"><a href="http://www.mooban.cn/"><i class="uk-icon-home"></i> 首页</a></li>
            <li><a href="http://www.mooban.cn/down/"><i class="uk-icon-folder-o"></i> 模板</a></li>
            <li><a href="http://www.mooban.cn/original/"><i class="uk-icon-folder-o"></i> 原创</a></li>
        </ul>

    </div>
</div>

综合应用

 

<div class="uk-container uk-visible-small touch-nav">
    <nav class="uk-navbar">
        <div class="uk-grid">
            <div class="uk-width-4-6">
                <div class="uk-navbar-brand uk-float-left">
                    <a class="w1" href="http://www.mooban.cn/down/"> <i class="uk-icon-home"></i> 会员 - 魔工坊</a>
                </div>
            </div>
            <div class="uk-width-2-6">
                <nav class="uk-nav">
                    <a href="#offcanvas" class="uk-navbar-toggle uk-float-right w1" data-uk-offcanvas=""></a>
                </nav>
            </div>
        </div>
    </nav>
</div>
<div id="offcanvas" class="uk-offcanvas">
    <div class="uk-offcanvas-bar">
        <ul class="uk-nav uk-nav-offcanvas">
            <li class="uk-active"><a href="http://www.mooban.cn/"><i class="uk-icon-home"></i> 首页</a></li>
            <li><a href="http://www.mooban.cn/down/"><i class="uk-icon-folder-o"></i> 模板</a></li>
            <li><a href="http://www.mooban.cn/original/"><i class="uk-icon-folder-o"></i> 原创</a></li>
            <li><a href="http://www.mooban.cn/source/"><i class="uk-icon-folder-o"></i> 源码</a></li>
            <li><a href="http://www.mooban.cn/plugin/"><i class="uk-icon-folder-o"></i> 插件</a></li>
            <li><a href="http://www.mooban.cn/material/"><i class="uk-icon-folder-o"></i> 素材</a></li>
            <li><a href="http://school.mooban.cn/"><i class="uk-icon-folder-o"></i> 教程</a></li>
            <li><a href="http://www.mooban.cn/know/"><i class="uk-icon-folder-o"></i> 问答</a></li>
        </ul>
    </div>
</div>
 html, h1, h2, h3, h4, h5, h6 {
            font-family: 'Microsoft YaHei',"Helvetica Neue",Helvetica,Arial,sans-serif!important;
        }
        .touch-nav {
            line-height: 40px;
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            z-index: 999999;
            background: #00a8e6 !important;
        }
        a.w1:link, a.w1:visited, a.w1:active, a.w1:hover {
            color: #fff;
            text-decoration: none;
        }
        .uk-navbar
        {
            background: 0;
            border: 0;
            text-shadow: none;
        }

uk-visible-small
这个类代表仅小屏幕可见
uk-navbar-toggle
添加这个类到一个 <a> 或 <div> 元素中,创建一个作为拨动开关的图标。

上一篇: uikit导航

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

365 人读过
文档导航