Simple Responsive jQuery Dropdown Mobile Menu Plugin - Mobile-Menu

Mobile-Menu is a minimalist jQuery mobile menu that creates a responsive dropdown menu at the top of the page, with a simple slide animation. Use media queries to display the menu at certain widths. Initially hide (#main-menu) with display: none; and in the media query at about 600px wide change it to display: block. Do the opposite for the regular menu. Or you can have this menu display always.

Basic usage:

1. Include the latest jQuery javascript library from google CDN.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

2. Create the Html for the mobile menu.

<div id="mobile-menu"><!-- Hide and show this div in your media queries --> 
<a href="#">
<div id="open">Menu</div>
</a>
<ul id="m-nav">
<a href="#">
<li>Home</li>
</a> <a href="#">
<li>About</li>
</a> <a href="#">
<li>Menu</li>
</a> <a href="#">
<li>Blog</li>
</a> <a href="#">
<li>Contact</li>
</a>
</ul>
</div>

3. The sample CSS to style the menu. Tweek the CSS or add your own styles.

#m-nav {
background: #000;
display: none;
}
ul#m-nav li {
list-style: none;
text-align: center;
padding: 15px 0;
font-size: 1.5em;
border-bottom: gray solid 1px;
}
#open {
color: #fff;
font-size: 1.5em;
padding: 10px 0;
background: #262626;
border-bottom: gray solid 1px;
text-align: center;
-webkit-box-shadow: 0px 6px 11px 0px rgba(50, 50, 50, 0.5);
-moz-box-shadow: 0px 6px 11px 0px rgba(50, 50, 50, 0.5);
box-shadow: 0px 6px 11px 0px rgba(50, 50, 50, 0.5);
}

4. The jQuery script.

$(document).ready(function() {

$('#open').click(function() {

$('#m-nav').slideToggle(1000); // Change the the speed of the animation. 1000 = 1 second.

});

});

---

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