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

可滑动触摸的jQuery隐藏侧边栏菜单插件

发布时间:2018/08/21?来源:互联网?浏览:?关键词:jquery?菜单导航?侧边栏?
可滑动触摸的jQuery隐藏侧边栏菜单插件 可滑动触摸的jQuery隐藏侧边栏菜单插件
阿里云

slide-and-swipe-menu是一款支持移动手机滑动触摸的隐藏侧边栏菜单jQuery插件。该侧边栏菜单基于touchSwipe插件,可以通过按钮来触发打开侧边栏菜单,并通过滑动触摸来关闭菜单。

简要教程

slide-and-swipe-menu是一款支持移动手机滑动触摸的隐藏侧边栏菜单jQuery插件。该侧边栏菜单基于touchSwipe插件,可以通过按钮来触发打开侧边栏菜单,并通过滑动触摸来关闭菜单。

?安装

可以通过bower或nmp来安装该侧边栏菜单插件。

bower install slide-and-swipe-menu --save
npm install slide-and-swipe-menu --save   

?使用方法

使用该侧边栏菜单插件需要引入jQuery,jquery.touchSwipe.min.js和jquery.slideandswipe.js文件。


 


 

  

或者直接使用Browserify:

require('slideAndSwipe');      

?HTML结构

下面是该侧边栏布局的基本HTML结构,侧边栏菜单放在

?CSS样式

需要为该侧边栏布局添加一些基本的CSS样式:

/* 侧边栏菜单样式 */
nav {
    height:100%;
    width:280px;
    background-color:#0a4a3c;
    left:0;
    top:0;
    z-index:2;
    position:fixed;
    overflow-y:auto;
    overflow-x:visible;
    transform:translate(-280px,0);
}
/* 遮罩层样式 */
.ssm-overlay {
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    left:0;
    background-color: rgba(0,0,0,0.2);
    display:none;
    z-index:1;
}        
?初始化插件

在页面DOM元素加载完毕之后,可以通过下面的方法来初始化该侧边栏菜单插件。

        

效果预览下载链接

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