Shifter Demo

Basic

Shifter works by checking for target elements in the DOM and binding events to them. This allows you to markup and style pages anyway you'd like, but at a minimum you need three specifically classed elements (including the body tag):

$.shifter();

<body class="shifter">
	<div class="shifter-page">
		<span class="shifter-handle">Menu</span>
		<!-- Page Content -->
	</div>
	<nav class="shifter-navigation">
		<!-- Navigation -->
	</nav>
</body>

Breakpoint

By default, Shifter will enable itself on screens smaller then 980 pixels wide. You can specify a different width by setting the maxWidth option on initialization.

$.shifter({
	maxWidth: Infinity
});

Demo

Click or tap the handle at the top-right of this page!

IE Support

When supporting IE you will need to include a HTML5 enabler and matchMedia polyfill (IE 8, IE 9).