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

Category: Javascript , Menu & Navigation , Recommended | June 5, 2015
Author: jakiestfu
Views Total: 3,144
Official Page: Go to website
Last Update: June 5, 2015
License: MIT

Preview:

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

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

You Might Be Interested In:


Leave a Reply