Cool Responsive Dropdown Menu Plugin with jQuery - EliteBox Menu

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.