Drawer / off canvas

Create a drawer that slides smoothly in and out of the page.
Drawers are perfect for building mobile navigation, similar to many popular native mobile applications, which use a button in the upper left corner to switch the sidebar with menus.

usage

. UK offcanvas add this class to a

<! -- this is the anchor for opening and closing the drawer side bar -- >
<a href="#my-id" data-uk-offcanvas>open</a>

<! -- drawer sidebar -- >
<div id="my-id" class="uk-offcanvas">
    < div class = "UK offcanvas bar" > drawer sidebar < / div >
</div>

Drawer navigation

The drawer sidebar can contain a navigation bar. Add the. UK NAV offcanvas class to ul to define the style of the navigation menu based on the context of the drawer.

<!-- This is the anchor for opening and closing the drawer side bar -->
<a href="#my-id" data-uk-offcanvas>open</a>
<!-- Drawer sidebar -->
<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> home page</a></li>
            <li><a href="http://www.mooban.cn/down/"><i class="uk-icon-folder-o"></i> Template</a></li>
            <li><a href="http://www.mooban.cn/original/"><i class="uk-icon-folder-o"></i> Original</a></li>
        </ul>

    </div>
</div>

Comprehensive application

<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> Member - Magic workshop</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> home page</a></li>
            <li><a href="http://www.mooban.cn/down/"><i class="uk-icon-folder-o"></i> Template</a></li>
            <li><a href="http://www.mooban.cn/original/"><i class="uk-icon-folder-o"></i> Original</a></li>
            <li><a href="http://www.mooban.cn/source/"><i class="uk-icon-folder-o"></i> Source code</a></li>
            <li><a href="http://www.mooban.cn/plugin/"><i class="uk-icon-folder-o"></i> Plug-in unit</a></li>
            <li><a href="http://www.mooban.cn/material/"><i class="uk-icon-folder-o"></i> Source material</a></li>
            <li><a href="http://school.mooban.cn/"><i class="uk-icon-folder-o"></i> Course</a></li>
            <li><a href="http://www.mooban.cn/know/"><i class="uk-icon-folder-o"></i> Questions and answers</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;
        }