Shifter – Simple jQuery Mobile Side Menu

Create a simple jQuery mobile side menu quickly by injecting some code and adjusting the maxWidth option.

shifter-simple-jquery-mobile-side-menu
Shifter is yet another solution for mobile side menus. It is a very easy-to-use and mobile first jQuery plugin that will allow you to create a simple slide menu which will slide out on the right of the page when you click or tap on the toggle icon. The greatest thing is that the plugin has only a simple maxWidth option which can be set in which resolutions the mobile navigation will appear on the web page.
Have a look below to learn how to use and download.


How to use it:

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>

Include jQuery Shifter’s script and stylesheet files

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

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>

Call the plugin and set the maxWidth option. The mobile navigation will only activate on screens which smaller then 1024 pixels wide.You can adjust it to suit your needs.

<script>
$(document).ready(function() {
$.shifter({
maxWidth: "1024px"
});
</script>

Demo   Download Shifter

Check out SIDR – BEST JQUERY SIDE MENUS to see how to create responsive menus.


You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *