html侧边栏的位置移动,适合移动手机使用的隐藏滑动侧边栏插件

slideout是一款非常实用的适合移动手机使用的隐藏滑动侧边栏js插件。它没有任何依赖，代码简洁，压缩后的代码只有2KB大小。它使用CSS3 transforms 和 transitions来制作侧边栏的滑动效果。它的特点还有：

没有任何框架的依赖。

代码简单，结构清晰。

自带原生滚动条。

易于定制。

使用CSS transforms 和 transitions来制作动画效果。

文件体积小，压缩后只有2KB大小。

安装

你可以使用下面的任何一个包管理来安装该侧边栏插件。

$ npm install slideout

$ spm install slideout

$ bower install slideout.js

$ component install mango/slideout

使用方法

HTML结构

该滑动侧边栏的HTML结构非常简单。你可以使用一个带#menu的来作为侧边栏菜单。使用元素来作为内容容器。

Menu

Panel

CSS样式

下面是该滑动侧边栏的基本CSS样式。

body {

width: 100%;

height: 100%;

}

.slideout-menu {

position: fixed;

left: 0;

top: 0;

bottom: 0;

right: 0;

z-index: 0;

width: 256px;

overflow-y: auto;

-webkit-overflow-scrolling: touch;

display: none;

}

.slideout-panel {

position:relative;

z-index: 1;

}

.slideout-open,

.slideout-open body,

.slideout-open .slideout-panel {

overflow: hidden;

}

.slideout-open .slideout-menu {

display: block;

}

初始化插件

在页面中引入Slideout.js，然后创建一个新的slideout对象实例。

var slideout = new Slideout({

'panel': document.getElementById('panel'),

'menu': document.getElementById('menu'),

'padding': 256,

'tolerance': 70

});

配置参数

Slideout(options)

创建一个新的Slideout对象实例。

options：(Object)在新对象实例中的参数对象。

options.panel：(HTMLElement)包含页面内容的DOM元素，默认为.slideout-panel。

options.menu：(HTMLElement)侧边栏DOM元素，默认值为.slideout-menu。

[options.duration]：(Number)打开/关闭侧边栏的时间，单位毫秒，默认值为300。

[options.fx]：(String)打开和关闭侧边栏时的CSS动画的easing效果，默认值为ease。

[options.padding]：(Number)默认值为256。

[options.tolerance]：(Number)默认值为70。

[options.touch]：(Boolean)设置为false时禁用移动触摸事件，默认值为true。

[options.side]：(String)在那一边打开侧边栏，可选值为left或right，默认值为left。

var slideout = new Slideout({

'panel': document.getElementById('main'),

'menu': document.getElementById('menu'),

'padding': 256,

'tolerance': 70

});

方法

Slideout.open();：打开侧边栏菜单，它发出beforeopen和open事件。

Slideout.close();：关闭侧边栏菜单，它发出beforeclose和close事件。

Slideout.toggle();：切换侧边栏菜单。

Slideout.isOpen();：如果侧边栏菜单打开返回true，否则返回false。

Slideout.enableTouch();：允许通过touch事件来打开侧边栏菜单。

Slideout.disableTouch();：禁止通过touch事件来打开侧边栏菜单。

Slideout.on(event, listener);

slideout.on('open', function() { ... });

Slideout.once(event, listener);

slideout.once('open', function() { ... });

Slideout.off(event, listener);

slideout.off('open', listener);

Slideout.emit(event, ...data);

slideout.emit('open');

事件

一个Slideout对象实例会发出下面的一些事件：

beforeclose

close

beforeopen

open

translate

Slideout对象实例只有在通过touch事件打开和关闭菜单时才发出translate事件。

slideout.on('translate', function(translated) {

console.log(translated); // 120 in px

});

浏览器兼容

Chrome (IOS, Android, desktop)

Firefox (Android, desktop)

Safari (IOS, Android, desktop)

Opera (desktop)

IE 10+ (desktop)