off-canvas-infinity-push
Off Canvas Infinity Push is a jQuery plugin that gives you the ability to make any desktop navigation into a mobile navigation. This plugin offers unlimited sub navigations.
Demos
Live Examples
Getting Started
Load jQuery(1.7+) and include Off Canvas Infinity Push plugin files. Add the stylesheet (jquery.ma.infinitypush.css) and the plugin (jquery.ma.infinitypush.js or jquery.ma.infinitypush.min.js) in your website. The stylesheet can be modified to fit the website design.
<!-- Basic stylesheet --> <link rel="stylesheet" type="text/css" href="plugin/jquery.ma.infinitypush.css" /> <!-- Include js plugin --> <script src="plugin/jquery.ma.infinitypush.js"></script>
Basic Navigation Markup
<nav id="primary-navigation"> <ul> <li><a href="#">Link</a> <ul> <li><a href="#">Link</a> <ul> <li><a href="#">Link</a> <ul> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </li> <li><a href="#">Link</a> <ul> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </nav>
Call the plugin
Now call the Off Canvas Push Infinity initializer function and your mobile navigation is ready.
<script type="text/javascript"> $(document).ready(function(){ $('#primary-navigation').infinitypush({ openingspeed: 300, closingspeed: 300 }); }); </script>
Options
offcanvas
: true, // Set to "false" to turn off the off canvasoffcanvasspeed
: 400, // Opening animation for the off canvas in millisecondsoffcanvasleft
: true, // Set to "false" for the right hand side positionopeningspeed
: 400, // Opening push animation in millisecondsclosingspeed
: 400, // Closing animation in millisecondspushdirectionleft
: true, // Set the push direction from right to left. "false" for left to rightspacing
: 90, // The spacing is in pixelautoScroll
: true, // Set to "false" if you don't need the auto scroll upscrollSpeed
: 300, // Scroll up animation in millisecondsdestroy
: false // Set to "true" to reset the navigation
License
The MIT License (MIT)