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.

Divi WordPress Theme

You may also like...

Leave a Reply

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

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close