当前位置:主页 > 网页特效 > 菜单导航 >

响应式手机App样式隐藏侧边栏特效插件

发布时间:2018/08/21?来源:互联网?浏览:?关键词:响应式?app?菜单导航?侧边栏?slidebar?
响应式手机App样式隐藏侧边栏特效插件 响应式手机App样式隐藏侧边栏特效插件
阿里云

Slidebars是一款简单实用的手机App样式隐藏侧边栏特效jQuery插件。该侧边栏插件十分小巧,仅需1555字节的js文件和600字节的css文件。它使用CSS3动画来制作过渡效果,在不支持的浏览器中会使用jQuery .animate()方法来替代。

简要教程

Slidebars是一款简单实用的手机App样式隐藏侧边栏特效jQuery插件。该侧边栏插件十分小巧,仅需1555字节的js文件和600字节的css文件。它使用CSS3动画来制作过渡效果,在不支持的浏览器中会使用jQuery.animate()方法来替代。

安装

可以通过bower来安装该侧边栏插件。

bower install Slidebars    

使用方法

HTML结构

在使用这个隐藏侧边栏插件时,的设置应该如下:

               

你的页面内容需要放置在一个#sb-site的容器中。侧边栏的

中需要添加.sb-slidebar的class,如果要侧边栏在左边,则再添加一个sb-leftclass。


  

class类

你需要添加.sb-slidebar?class到所有的侧边栏上。

然后你可以通过添加下面的class来设置不同类型的侧边栏。

  • .sb-left:设置侧边栏为左侧边栏。
  • .sb-right:设置侧边栏为右侧边栏。
  • .sb-static:设置侧边栏为不固定模式,它会随滚动条一起滚动。
  • .sb-style-push:侧边栏打开时会推动页面内容。
  • .sb-style-overlay:侧边栏打开时会遮罩页面内容。
  • .sb-width-thin:一个自适应宽度,比标准宽度小15%。
  • .sb-width-wide:一个自适应宽度,比标准宽度大15%。
  • sb-width-custom:要自定义侧边栏的宽度,需要添加.sb-width-custom?class,并通过data-sb-width属性传入一个指定的宽度值。你可以传入一个固定的刻度值,也可以传入一个百分比值。例如:
    
      
    
  • .sb-momentum-scrolling:添加这个class可以使用原生的IOS平滑滚动。
  • class控制类:

    下面的一些可选的class可用于控制侧边栏。

    ?动画class类

    如果你想要侧边栏有滑动效果可以添加.sb-slide?class。这对于固定定位的元素非常有用,例如顶部导航条。

    辅助class类

    该侧边栏插件有下面一些辅助class类。

    ?初始化插件

    在页面DOM元素加载完毕之后,可以通过$.slidebars()方法来初始化该侧边栏插件。

    (function($) {
      $(document).ready(function() {
        $.slidebars();
      });
    }) (jQuery);    

    也可以在初始化时传入一些配置参数:

    (function($) {
      $(document).ready(function() {
        $.slidebars({
          siteClose:true,// true or false
          disableOver: 480,// integer or false
          hideControlClasses:true,// true or false
          scrollLock:false// true or false
        });
      });
    }) (jQuery);    

    配置参数

    ?API

    该侧边栏插件有一些API方法。你需啊哟在初始化的时候创建一个新的侧边栏实例对象。

    下面是一个例子:

         

    共有人阅读,期待你的评论!评论
    说点什么吧
    • 全部评论(0
      还没有评论,快来抢沙发吧!
    Top