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();<html>
<body class="shifter">
<div class="shifter-page">
<!-- Page Content -->
</div>
<nav class="shifter-navigation">
<!-- Navigation -->
</nav>
</body>
</html>Custom Widths
By default, Shifter will activate 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).
