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文件。

<script src="jquery/1.8.2/jquery.min.js"></script>

<!-- touchSwipe library -->
<script src="http://labs.rampinteractive.co.uk/touchSwipe/jquery.touchSwipe.min.js"></script>

<!-- Sliding swipe menu javascript file -->
<script src="js/jquery.slideandswipe.js"></script>

或者直接使用Browserify：

require('slideAndSwipe');
HTML结构

下面是该侧边栏布局的基本HTML结构，侧边栏菜单放在<nav>元素中。

<body>
    <nav>
        [...]
    </nav>
    <main>
        [...]
        <a class="ssm-open-nav" href="#" title="Open / close">Open / close</a>
    </main>
    <div class="ssm-overlay"></div>
</body>
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元素加载完毕之后，可以通过下面的方法来初始化该侧边栏菜单插件。

<script>
    $(document).ready(function() {
        $('nav').slideAndSwipe();
    });
</script>