Built by Loz Calver:

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


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.


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.



	<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>


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


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.


Option Default Description
	left: 'access-left',
	right: 'access-right'
An object containing the class names that should be applied when exposing the left and right hand menus
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.