Slide and Swipe Mobile Menu Plugin with jQuery
File Size: | 13.5 KB |
---|---|
Views Total: | 10719 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.