html5 左侧滑动删除,可滑动触摸的jQuery隐藏侧边栏菜单插件

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结构，侧边栏菜单放在元素中。

[...]

[...]

Open / close

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元素加载完毕之后，可以通过下面的方法来初始化该侧边栏菜单插件。

$(document).ready(function() {

$('nav').slideAndSwipe();

});