JavaScript Library For Creating App Style Side Menus – Snap.js

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