“jQuery EliteBox Menu”

Created: September 23, 2014
By: Lukasz Czerwinski
Email: luki2p@gmail.com

Thank you for download my item. I hope that you are happy to use it. If you have any questions that are beyond the scope of this help file or you need modify the script, please feel free to email via my user page contact form here. Thanks so much!


Step by step.

  1. HEAD Section
  2. EliteBox Menu Structure
  3. Init the EliteBox Menu

A) HEAD Section - top

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

<!-- 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> 

Now, you must add all files of the jQuery EliteBox - Drop-Down Menu script to your site.

<!-- 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 -->

B) EliteBoxMenu Structure - top

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 --> 

C) Init the EliteBox Menu - top

In the finish, 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();
}); 

This is default usage with default settings of the EliteBox Menu plugin. See the default settings:

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

Example usage of custom settings.

jQuery(document).ready(function ($){ 
  //Usage 
  $(".eliteBoxMenu ul#secondMenu").eliteBoxMenu({
  	method: 'click'
  });
}); 

Lukasz Czerwinski

Go To Top