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

Category: Javascript , Menu & Navigation , Recommended | June 5, 2015
Views Total:2,648 views
Official Page:Go to website
Last Update:June 5, 2015


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


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">
        <li><a href="#">Menu 1</a></li>
        <li><a href="#">Menu 2</a></li>
        <li><a href="#">Menu 3</a></li>
  <div class="snap-drawer snap-drawer-right"></div>

Wrap the main content into a container named ‘content’.

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

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

You Might Be Interested In:

Leave a Reply