Simple & Lightweight Responsive jQuery Mobile Menu Plugin

Just another jQuery responsive menu plugin that transforms the horizontal & multi-level navigation menu into a toggleable dropdown menu on mobile devices.

How to use it:

1. Create a standard dropdown menu using nested Html unordered lists.

<nav> <span class="re-order"> <img src="assets/images/re-order.png" alt="" /> </span>
<ul>
<li><a href="">Menu 1</a></li>
<li> <a href="">Menu 2</a>
<ul>
<li> <a href="">Mnue 2.1</a>
<ul>
<li><a href="">Menu 2.1.1</a></li>
<li><a href="">Menu 2.1.2</a></li>
</ul>
</li>
<li><a href="">Menu 2.2</a></li>
<li><a href="">Menu 2.3</a></li>
</ul>
</li>
<li><a href="">Menu 3</a></li>
</ul>
</nav>

2. Style the mobile menu and set the breakpoint using media queries in the CSS.

.re-order {
cursor: pointer;
position: fixed;
z-index: 2;
background-color: #fff;
top: 12px;
right: 12px;
width: 50px;
height: auto;
}
@media (min-width: 960px) {
.re-order {
display: none;
}
}
nav {
padding: 12px;
}
nav a {
display: block;
padding: 12px;
color: #fff;
text-shadow: 0 0 3px #a3d5f1;
font-weight: 600;
text-transform: uppercase;
background-color: #8dc9ee;
-webkit-transition-property: background-color;
-moz-transition-property: background-color;
-o-transition-property: background-color;
transition-property: background-color;
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
transition-duration: 0.5s;
-webkit-transition-timing-function: ease;
-moz-transition-timing-function: ease;
-o-transition-timing-function: ease;
transition-timing-function: ease;
}
nav a:hover {
background: #aad7f2;
text-shadow: 3px 1px 0px #8dc9ee;
}
nav ul {
display: none;
text-align: center;
}
nav ul.open {
display: block;
}
@media (min-width: 960px) {
nav ul {
display: block;
}
nav ul li {
display: inline-block;
position: relative;
margin-right: -2px;
margin-left: -2px;
}
nav ul li li {
display: block;
}
nav ul li.parent ul {
display: none;
}
nav ul ul {
display: none;
position: absolute;
top: 100%;
left: 0;
width: 200%;
text-align: left;
}
nav ul ul ul {
left: 100%;
top: 0;
}
}

3. Load the jQuery library and menu.jquery.js script at the bottom of your web page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script src="assets/javascripts/menu.jquery.js"></script>

4. Call the plugin and you're done.

$(function(){
$("nav ul").menu({
menuSpeed: 10,
callback: function(){}
});
});

---

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