Simple Responsive jQuery Dropdown Mobile Menu Plugin - Mobile-Menu
File Size: | 2.59 KB |
---|---|
Views Total: | 5130 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.