Cool Responsive Dropdown Menu Plugin with jQuery - EliteBox Menu
File Size: | 771 KB |
---|---|
Views Total: | 4780 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

EliteBox Menu is a cool jQuery menu plugin which allows you to create a fully responsive, animated, 2-level dropdown menu with ease.
Features:
- Fancy easing animations based on jQuery UI or jQuery easing plugin.
- You can use images or icons on each menu item.
- Automatically converts horizontal layout into vertical on mobile devices.
Basic Usage:
1. Include necessary jQuery and jQuery UI in your Html page.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
2. Include the jQuery EliteBox Menu plugin's script and stylesheet in the page.
<link rel="stylesheet" href="eliteBoxMenu.css"> <script src="js/eliteBoxMenu_min.js"></script>
3. Create a 2-level dropdown menu with nested Html unordered lists. Use data-image
and data-color
to specify the image & background color for each menu item. The full Html structure might be like this.
<div class="eliteBoxMenu"> <ul> <li><a href="#" data-image="home.jpg" data-color="#d21573"><span>Home</span><span>jQuery Script</span></a> <ul> <li><a href="#">Subitem 1</a></li> <li><a href="#">Subitem 2</a></li> </ul> </li> <li><a href="#" data-image="contact.jpg" data-color="#d215d0"><span>Contact us</span><span>Contact</span></a></li> <li><a href="#" data-image="blog.jpg" data-color="#15d2b1"><span>Read more posts</span><span>Blog</span></a> <ul> <li><a href="#">Subitem 1</a></li> <li><a href="#">Subitem 2</a></li> </ul> </li> </ul> </div>
4. Initialize the responsive dropdown menu just with one JS call.
jQuery(document).ready(function($){ $(".eliteBoxMenu ul").eliteBoxMenu(OPTIONS); });
5. Default options. Pass the options in your JS call to customize the responsive dropdown menu.
jQuery(document).ready(function($){ $(".eliteBoxMenu ul").eliteBoxMenu({ Speed : 350, //Speed animations mainHeight: 60, //Default height of $mainItems mainWidth: 170, //Default width of $mainItems hoverColor: '#15b1d2', //Default color for item hover if don't set in attribute method : 'mouseenter', //Default method to do an action (mouseenter or click) rwdFrom : 980 //Start Restponsive Web Design }); });
This awesome jQuery plugin is developed by LukaszCzerwinski. For more Advanced Usages, please check the demo page or visit the official website.