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