Built by Loz Calver:

Demo page built with the wonderful Bootstrap, icons by Glyphicons.

Todo

In version 2 I intend to rebuild SwipeMe from the ground-up, removing all CSS requirements and instead managing the menu transitions and positioning with Javascript - using CSS translations and fallbacks where possible.

SwipeMe

A lightweight library for swiping off-canvas menus

SwipeMe is a Javascript library built to swipe open/close off-canvas navigation menus – currently relying on CSS3 animations. When a swipe is detected, SwipeMe will add (or remove) the appropriate CSS class from a main 'container' element. For an in-depth example of how to implement an off-canvas navigation pattern, see this brilliant example by Jason Weaver.

Implementation

HTML

	<div id="swipeme">
		<div class="off-canvas-left">Left off-canvas</div>
		<div class="main-content">Main content</div>
		<div class="off-canvas-right">Right off-canvas</div>
	</div>

Javascript

	var swipe = new SwipeMe(document.getElementById('swipeme'));

Customisation

Disabling SwipeMe on certain elements

You may wish to prevent SwipeMe from triggering a swipe event when touching certain elements on a page – a common example being an image carousel. Simply add a data-swipeme-ignore="true" attribute to prevent swipe events being triggered when the element, or any of its child elements, are touched.

Options

Option	Default	Description
`accessClasses`	{ left: 'access-left', right: 'access-right' }	An object containing the class names that should be applied when exposing the left and right hand menus
`direction`	[ 'left', 'right' ]	A array describing in which direction(s) off-canvas menus are available. May be passed as a string "left" or "right"

Browser Support

As the library currently only adds and removes CSS classes, all animations are CSS-generated – so <=IE9 and Opera Mini won't get any animations. Ancient versions of IE will need also the Array.indexOf prototype available here.

iOS 7

iOS 7 adds swipe navigation gestures to Safari, which (as far as I'm aware) can't be disabled. It's still possible to use this library with iOS 7 – the native gestures are only triggered when swiping from the very edge of the page.

About