Slideout.js一款简单易用兼容移动端的触摸侧滑菜单插件
Slideout.js一款兼容移动端的触摸滑动导航菜单。不需依赖其他第三方库，使用起来非常简单。支持原生滚动，能够轻松实现定制，支持CSS3转换和过渡。最重要的是，压缩版大小只有2KB。
入门指南
Gif效果演示
1、引入JS库
<script src="js/slideout.min.js"></script>
或CDN方式
<script src="https://cdn.bootcss.com/slideout/1.0.1/slideout.min.js"></script>
2、HTML代码
<nav id="menu">
<header>
<h2>Menu</h2>
</header>
</nav>
<main id="panel">
<header>
<h2>Panel</h2>
</header>
</main>
说明：网页大体分两部分：导航区和内容区，导航区最外层的容器元素我们定义其id为menu，内容区最外层容器元素我们定义其id为panel。这是为了能在脚本中进行引用。
3、添加样式美化页面
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;
}
说明：因为插件本身不包含样式或者提供的样式很少，为了使得页面看起来更美观，我们需要自己添加样式，来满足项目的需求。
4、使用脚本初始化插件
<script>
var slideout = new Slideout({
'panel': document.getElementById('panel'), //获取内容区容器标签
'menu': document.getElementById('menu'), //获取导航区容器标签
'padding': 256, //打开菜单距离左边的间距
'tolerance': 70
});
</script>
更多使用方法请参考官网API
the end
