Slide and Swipe Mobile Menu Plugin with jQuery

File Size: 13.5 KB
Views Total: 10662
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="//"></script>
<script src="//"></script>

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

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

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() {

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


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