Author: | jakiestfu |
---|---|
Views Total: | 2,634 views |
Official Page: | Go to website |
Last Update: | June 5, 2015 |
License: | MIT |
Preview:

Description:
Snap.js is a simple yet robust JavaScript library for creating mobile app style side navigation (drawer menu) as you seen on Facebook and Path.
Key features:
- Library Independent
- High Customization
- Flick Support
- User Intent Detection
- Disable Hyperextension
- Event Hooks
- CSS3 Powered Animations with IE fallbacks
- Drag Support
- Drag Handle Support
- Programatic API
- “No-Drag” Elements
- Definable Easing Mode
- Enable/Disable Events
- Disabled Sides (left or right)
- Supports Ratchet< (with templates!)
Basic usage:
Download, unzip and load the snap.css & snap.js in your web project.
<link rel="stylesheet" href="snap.css"> <script src="snap.js"></script>
Create a side menu as shown below.
<div class="snap-drawers"> <div class="snap-drawer snap-drawer-left"> <div> <ul> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 2</a></li> <li><a href="#">Menu 3</a></li> </ul> </div> </div> <div class="snap-drawer snap-drawer-right"></div> </div>
Wrap the main content into a container named ‘content’.
<div id="content" class="snap-content"> ... </div>
Initialize the side menu with default options.
var snapper = new Snap({ element: document.getElementById('content') });
Available options.
// The element which the user will be sliding side to side element: null, // The element which the user will be using to slide the target element side to side dragger: null, // String, set to 'left' or 'right' to disable the respective side disable: 'none', // Add classes to the body to signify which side is being opened addBodyClasses: true, // If false, pane may not be slide past the minPosition and maxPosition hyperextensible: true, // The cooeficcient used to slow sliding when user has passed max or min threshold resistance: 0.5, // Number of pixels the user needs to swiftly travel to activate a "flick" open flickThreshold: 50, // The speed at which the pane slides open or closed transitionSpeed: 0.3, // The CSS3 Easing method you want to use for transitions easing: 'ease', // Maximum number of pixels the pane may be slid to the right maxPosition: 266, // Maximum number of pixels the pane may be slid to the left minPosition: -266, // If true, tapping an open pane will close it tapToClose: true, // If true, dragging the target settings.element will open/close the pane touchToDrag: true, // The number of degrees the user must initiate sliding in towards the left or right slideIntent: 40, // The minimum amount of pixels the user needs to drag within the slideIntent degrees to move the pane minDragDistance: 5