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!
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 -->
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 -->
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
jQuery(document).ready(function ($){ //Usage $(".eliteBoxMenu ul#secondMenu").eliteBoxMenu({ method: 'click' }); });
Lukasz Czerwinski