Categories:

Home / Free JavaScripts / Menu and redirection / Here

Cut & Paste jQuery Mega Menu

Credit: JavaScript Kit

Description: Mega Menus refer to drop down menus that contain multiple columns of links. This jQuery script lets you add a mega menu to any anchor link on your page, with each menu revealed using a sleek expanding animation. Customize the animation duration plus delay before menu disappears when the mouse rolls out of the anchor. Mega cool!

Example:

Directions

Step 1: Add the following code to the <head> section of your page:

It references two external files. Download them below (right click, and select "save as"):

Step 2: Add the below HTML code to your page. It includes one example anchor link plus the associated mega drop down menu:

Configuration info

Each Mega Menu consists of an HTML anchor link, plus its associated drop down menu. The anchor link should just be any arbitrary link with a unique ID attribute:

<!--Mega Menu Anchor-->
<a href="http://www.javascriptkit.com" id="megaanchor">Tech Sites</a>

The associated drop down menu on the other hand should be a DIV containing a series of ULs in the format shown in the code of Step 2. It should also carry a unique ID:

<!--Mega Drop Down Menu HTML. Retain given CSS classes-->
<div id="megamenu1" class="megamenu">
Mega Menu HTML here...
</div>

With both of the above components defined on your page, in the HEAD section of your page, initialize this menu by calling:

<script type="text/javascript">

//jkmegamenu.definemenu("anchorid", "menuid", "mouseover|click")
jkmegamenu.definemenu("megaanchor", "megamenu1", "mouseover")

</script>

Where the first two parameters are the IDs of the anchor and associated drop down menu, and the 3rd, a string of either "mouseover" or "click". This last parameter lets you specify which of these two actions the menu should be activated on the anchor link.

Finally, yes, you can have multiple mega menus on your page. Just repeat the steps above and call jkmegamenu.definemenu() for each menu. Enjoy!

p.s: Inside the .js file, there are two variables you may wish to fine tune:

effectduration: 300, //duration of animation, in milliseconds
delaytimer: 200, //delay after mouseout before menu should be hidden, in milliseconds


JavaScript Tools:
Site Info

CopyRight 1998-2012 JavaScript Kit. NO PART may be reproduced without author's permission.