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

• Left Navigation
• Right Navigation
• Responsive
• No Auto Scroll
• No Off Canvas
• Reset

Live Examples

• Whistles
• Brown Bag Clothing
• Woodhouse

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 canvas
• offcanvasspeed: 400, // Opening animation for the off canvas in milliseconds
• offcanvasleft: true, // Set to "false" for the right hand side position
• openingspeed: 400, // Opening push animation in milliseconds
• closingspeed: 400, // Closing animation in milliseconds
• pushdirectionleft: true, // Set the push direction from right to left. "false" for left to right
• spacing: 90, // The spacing is in pixel
• autoScroll: true, // Set to "false" if you don't need the auto scroll up
• scrollSpeed: 300, // Scroll up animation in milliseconds
• destroy: false // Set to "true" to reset the navigation

License

The MIT License (MIT)