Create a simple jQuery mobile side menu quickly by injecting some code and adjusting the maxWidth option.
Image may be NSFW.
Clik here to view.
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>
Check out SIDR – BEST JQUERY SIDE MENUS to see how to create responsive menus.
