emengweb 's Blog

抽屉/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> 元素中，创建一个作为拨动开关的图标。