uikit抽屉与响应式可见性

抽屉/Off-canvas

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

用法

.uk-offcanvas 添加该类至一个

元素来创建隐藏在页面外的边栏容器和覆盖层。id也需要添加，使抽屉可被打开或关闭。
.uk-offcanvas-bar 添加该类至一个子级

元素来创建抽屉式边栏。
你可以使用任何元素来切换抽屉式侧边栏。 a元素需要链接至抽屉容器的id。为了使必要的JavaScript生效，仅需添加data-uk-offcanvas属性即可

open



    
抽屉式边栏

抽屉式导航

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

open


    

        

            
 首页
            
 模板
            
 原创
        

    

综合应用

image

    

        

            

                

                      会员 - 魔工坊
                
            
            

                

                    
                
            
        
    


    

        

            
 首页
            
 模板
            
 原创
            
 源码
            
 插件
            
 素材
            
 教程
            
 问答
        
    

 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
添加这个类到一个 或

元素中，创建一个作为拨动开关的图标。