Simple jQuery Mobile Navigation Side Menu - Shifter
| File Size: | 15.7 KB |
|---|---|
| Views Total: | 18389 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
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="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></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 </div> <nav class="shifter-navigation"> Navigation goes here </nav>
4. Call the plugin and set the maxWidth option. The mobile navigation will only activate itself on screens smaller then 1024 pixels wide.
<script>
$(document).ready(function() {
$.shifter({
maxWidth: "1024px"
});
</script>
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.
