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.

sex shop sex shop sex shop sex shop sex shop seks shop spanish fly psikolog sohbet numara sohbet hatti

Source: luckyjquery.net

1. INCLUDE CSS AND JS FILES

<!-- enable RWD -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- jQuery library -->
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script> 
<script type="text/javascript" src="js/jquery-ui.min.js"></script> 

<!-- start EliteBoxMenu scripts -->
<script type="text/javascript" src="js/script.js"></script>  
<script type="text/javascript" src="js/eliteBoxMenu_min.js"></script>
<link rel="stylesheet" type="text/css" href="eliteBoxMenu.css" />
<!-- end EliteBoxMenu scripts -->

The jQuery EliteBox - Drop-Down Menu must have the jQuery 1.7+ library, the jQuery UI (with Effects Core) and init possibility to rensponsive.

2. HTML

The EliteBoxMenu structure is very simple. First, you must create a div with eliteBoxMenu class. Inside the div push <ul> menu list, where each<li> will be have a link and submenus. See the example code.

<!-- Drop-Down Menu STRUCTURE -->
<div class="eliteBoxMenu">
    <ul>
        <li><a href="#" data-image="pictures/card18.jpg" data-color="#d21573"><span>About Us</span><span>Bussiness</span></a>
            <ul>
                <li><a href="#">Subitem 1</a></li>
                <li><a href="#">Subitem 2</a></li> 
            </ul>
        </li>
        <li><a href="#" data-image="pictures/book01.jpg" data-color="#d215d0"><span>Read the book</span><span>Bestseller</span></a></li> 
    </ul> 
</div>
<!-- end Drop-Down Menu STRUCTURE --> 

• data-image - link to an image.
• data-color - color for item after Hover/Click it. You don't must set color for each item because you can set default color by plugin settings

      3. JAVASCRIPT

 you must init the EliteBox Menu jQuery plugin and set propertises. Please open the script.js file where you can find the code

jQuery(document).ready(function ($){ 
  //Usage 
  $(".EliteBoxMenu ul").EliteBoxMenu();
}); 

4. OPTIONS

Speed: 350,
mainHeight: 60,
mainWidth: 170,
hoverColor: '#15b1d2',
method: 'mouseenter',
rwdFrom: 980   

• Speed - speed of animations in miliseconds.
• mainHeight and mainWidth - size of main items, if you change the values please update it also in EliteBoxMenu.css.
• hoverColor - default color for items hover if you don't set custom color in item attribute.
• method - method of use the menu - mouseenter or click. For mobile devices the method always is click.
• rwdFrom - set the width for Responsive Web Design. If you change the property you must also update in CSS.