jQuery EliteBox Menu

jQuery EliteBox Menu

Released 3 years ago , Last update 3 years ago

EliteBox Menu is a cool jQuery menu plugin which allows you to create a fully responsive, animated, 2-level dropdown menu with ease.

enter image description here If do you need fresh menu for your project - see the EliteBox Drop-Down Menu jQuery plugin, maybe that is it. The EliteBox have to offer you high spectrum of possibilities. It use images on main items, in combination with the dynamic animation - it gives a unique effect, which is more intuitive. In addition, EliteBox can be second-level. You can set custom color for each item. The Drop-Down Menu script is fully Responsive an easy to use.

Features of the EliteBox Menu:

  • 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.
  • You can also add different colors for each items.
  • Possibility to change speed of animation.
  • Possibility to set method for open menu items - hover or click.
  • Easy to change look.

Pricing

14 day 14-day money-back guarantee

FREE

GNU LGPL

The GNU LGPL is an open-source license.

Need custom services for this product? Get a quote

How to use the EliteBox Menu

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>

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>

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>

Initialize the responsive dropdown menu just with one JS call.

jQuery(document).ready(function($){ 
  $(".eliteBoxMenu ul").eliteBoxMenu(OPTIONS); 
});
License » GNU LGPL Download

Get A Quote

What do you need?
  • Custom development
  • Integration
  • Customization / Reskinning
  • Consultation
When do you need it?
  • Soon
  • Next week
  • Next month
  • Anytime

Thanks for getting in touch!

Your quote details have been received and we'll get back to you soon.

or Get a quote

for customization or integration services


Or enter your name and Email
No comments have been posted yet.