Mega Navigation onmouseover

This free JavaScript code drops down the container that has a lot of the menu, along with very very very numberous items when users click the indicated link. This effect will be useful and appropriate if your website has a huge list of categories, up to hundreds, need to be shown, like jsB@nk version 8.

Sampled by

Tech Links


From © JavaScript Kit

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="" 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...

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


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

Over 2000+ free Javascript
at Website