Lightweight jQuery Mobile Collapsible Menu - Mobile Navigation

File Size: 46.1KB
Views Total: 8085
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Lightweight jQuery Mobile Collapsible Menu - Mobile Navigation

Mobile Navigation is a simple, responsive and mobile first jQuery menu plugin that converts a multi-level menu into a collapsible drop down navigation menu at mobile devices.

How to use it:

1. Include the basic CSS and theme CSS on your page.

<link rel="stylesheet" href="css/mnav.css" />
<link rel="stylesheet" href="css/mnav-theme.css" />

2. Create the html for a responsive navigation menu.

<nav id="demo">
<li><a href="">Home</a></li>
<li><a href="">Blog</a></li>
<a href="#">Categories</a>
<li><a href="">jQuery Menu Plugins</a></li>
<li><a href="">jQuery Slider Plugins</a></li>
<li><a href="">jQuery Table Plugins</a></li>

3. Include the jQuery library and jQuery Mobile Navigation on the page.

<script src=""></script>
<script type="text/javascript" src="js/mnav.js"></script>

4. Call the plugin with options.

<script type="text/javascript">
$(function() {
mainMenuSpeed: 200, // How fast will the main menu slide down?
subMenuSpeed: 200, // How fast will the sub menu slide down?
delayCloseSpeed: 250, // How long to wait before the dropdown closes
mobileButtonPos: 'right', // Which side will the button be?
subMenuOpen: false, // Sub Menu open by default?

5. Change the styles via CSS or create a new theme to suit your needs.

This awesome jQuery plugin is developed by koralarts. For more Advanced Usages, please check the demo page or visit the official website.