JS Library For Facebook Style Side Panel Menus - Snap.js

Snap.js is a simple javacript library for creating beautiful mobile shelfs similar to facebook or path style side panel menus. It can reveal the hidden side menus with CSS3 easing and sliding effects while dragging in viewport.

Related plugins:

• YouTube Like Left Side Drop Down Menu Effect
• jQuery Simple Slide Out And Drawer Effect Plugin
• Cool Animated Side Menus with Sliding and Pushing Effects
• Simple and Touch-Enabled Responsive Navigation Menu Plugin
• jQuery Plugin For Responsive Side Menu - sidr
• Three-Dimensional and Space Efficient Menu - Meny
• Paneled-Style Navigation Menu Plugin - jPanelMenu

Basic Usage:

1. Include Snap.js on your web page

<script type="text/javascript" src="snap.js"></script> 

2. Include snap.css on the page to style your slide menu

<link rel="stylesheet" type="text/css" href="snap.css" />

3. Create a slide menu for your web page

<div class="snap-drawers">
<div class="snap-drawer snap-drawer-left">
...
</div>
<div class="snap-drawer snap-drawer-right">
...
</div>
</div>

<div id="content" class="snap-content">
...
</div>

4. The javascript

<script type="text/javascript">
var snapper = new Snap({
    element: document.getElementById('content')
});       
</script>

5. Options

var settings = {
element: null, // The element which the user will be sliding side to side
disable: 'none', // Set to 'left' or 'right' to disable the respective side
addBodyClasses: true, // Add classes to the body to signify which side is being opened
resistance: 0.5, // The cooeficcient used to slow sliding when user has passed max or min threshold
flickThreshold: 50, // Number of pixels the user needs to swiftly travel to activate a "flick" open
transitionSpeed: 0.3, // The speed at which the pane slides open or closed
easing: 'ease', // The CSS3 Easing method you want to use for transitions
maxPosition: 266, // Maximum number of pixels the pane may be slid to the right
minPosition: -266, // Maximum number of pixels the pane may be slid to the left
tapToClose: true, // If true, tapping an open pane will close it
touchToDrag: true, // If true, dragging the target settings.element will open/close the pane
slideIntent: 40, // degrees 
minDragDistance: 5
},

More Examples:

• Default
• No Drag
• Right Disabled
• Skinny Threshold
• Toggles
• Class Names
• Expanding
• Settings
• Ratchet

---

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