Simple & Lightweight Responsive jQuery Mobile Menu Plugin
File Size: | 42.1 KB |
---|---|
Views Total: | 2968 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.