Simple jQuery Mobile Navigation Side Menu - Shifter

File Size: 15.7 KB
Views Total: 18590
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Simple jQuery Mobile Navigation Side Menu - Shifter

Shifter is an easy-to-use and mobile first jQuery plugin for creating a slide menu which slides out from the right side of the page when clicking or tapping the toggle button. The plugin has only just a simple maxWidth option which allows to set in which resolutions/dimensions the mobile navigation will appear on the web page.

How to use it:

1. Load the latest jQuery javascript library in your page.

<script src=""></script>

2. Include jQuery shifter's script and stylesheet files in the page.

<script src="jquery.fs.shifter.js"></script>
<link href="jquery.fs.shifter.css" rel="stylesheet" type="text/css" media="all" />

3. Markup html structure.

<body class="shifter">
<div class="shifter-page">
<span class="shifter-handle">Menu</span>
Main content goes here
<nav class="shifter-navigation">
Navigation goes here

4. Call the plugin and set the maxWidth option. The mobile navigation will only activate itself on screens smaller then 1024 pixels wide.

$(document).ready(function() {
maxWidth: "1024px"

Change logs:

v3.1.2 (2014-10-29)

  • Fixing issue with nav remaining visible on iOS

v3.1.1 (2014-10-28)

  • Modifying internal data structures;
  • Removing defaults method

v3.1.0 (2014-10-25)

  • Spliting LESS config and styles for easier integration; 
  • Removing image dependency - moved to after element;

v3.0.7 (2014-07-30)

  • Fixing overflow issue on windows phone

v3.0.6 (2014-07-30)

  • Fixing issue taps triggering twice.

v3.0.5 (2014-04-23)

  • Fixing issue with multiple initializations;

v3.0.4 (2014-04-19)

  • Adding ability to define shifter-header - for fixed headers that shift!

v3.0.3 (2014-02-20)

  • Fixing IE8/9 z-index;

v3.0.2 (2014-01-21)

  • update to the latest version.

v2.2.10 (2014-01-03)

  • Renaming internal functions;

This awesome jQuery plugin is developed by Formstone. For more Advanced Usages, please check the demo page or visit the official website.