Slide and Swipe Mobile Menu Plugin with jQuery

A simple, lightweight jQuery plugin used to create a mobile-first sliding off-canvas menu that uses jQuery touchSwipe library for touch events support.

Basic usage:

1. Load the necessary jQuery library and the jQuery touchSwipe plugin from CDNs.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.4/jquery.touchSwipe.min.js"></script>

2. Create the html for the off-canvas mobile navigation.

<nav class="nav ssm-nav-visible">
  ...
</nav>

3. Create a link to toggle the mobile navigation.

<a href="#" class="ssm-open-nav" title="open nav">open / close navigation</a>

4. Create an overlay that covers the rest of your webpage when the mobile navigation is opened.

<div class="ssm-overlay visible" style="display:block;"></div>

5. Add basic styles to the mobile navigation & overlay.

nav {
  height: 100%;
  width: 280px;
  background-color: #0a4a3c;
  left: 0;
  top: 0;
  z-index: 2;
  position: fixed;
  overflow-y: auto;
  overflow-x: visible;
}

.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;
}

6. Call the plugin on the nav tag and we're done.

$(document).ready(function() {
  $('.nav').slideAndSwipe();
});

7. Possible options with defaults.

triggerOnTouchEnd   : true,
swipeStatus         : swipeStatus,
allowPageScroll     : 'vertical',
threshold           : 100,
excludedElements    : 'label, button, input, select, textarea, .noSwipe',
speed               : 250

About Author:

Author: Joan

Website: http://joanclaret.github.io/slide-and-swipe-menu/

---

This awesome jQuery plugin is developed by JoanClaret. For more Advanced Usages, please check the demo page or visit the official website.