Animated Drop Down Navigation Menu

Documentation

To set up an Animated Outline Menu over an anchor link on the page, first, define any arbitrary link to be used as the anchor:

<a href="#" id="designanchor">Web Design Links</a>

Give it a unique ID attribute value. Then, define the outline menu for it using the below conventions, and at the very end of your document (right above the </body> tag):

<div id="mymenu1" class="outlinemenu">

<ul>
<li><a href="http://www.dynamicdrive.com/">JavaScript Kit</a></li>
<li><a href="http://www.dynamicdrive.com/" >Dynamic Drive</a></li>
<li><a href="http://www.dynamicdrive.com/style/" >CSS Library</a></li>

<li><a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></li>
<li><a href="http://www.javascriptkit.com/domref/">DOM Reference</a></li>
<li><a href="http://www.cssdrive.com">CSS Drive</a></li>

<li><a href="http://www.codingforums.com/" style="border-bottom-width: 0">Coding Forums</a></li> 
</ul>
</div>

<script type="text/javascript">
//jkoutlinemenu.definemenu("anchorid", "menuid", "mouseover|click", optional_width, optional_height)
jkoutlinemenu.definemenu("designanchor", "mymenu1", "mouseover", 180)

</script>

</body>

Each outline menu should be a DIV that contains a UL list menu. Give the outermost DIV a unique ID, plus a class of "outlinemenu" to style it. Finally, call the function jkoutlinemenu.definemenu() to tie everything together:

jkoutlinemenu.definemenu("designanchor", "mymenu1", "mouseover", 180)

1. First parameter: ID value of the anchor link

2. Second parameter: ID value of the outline menu

3. Third parameter: Either a value of "mouseover" or "click", which controls whether the menu is revealed when the user hovers over or clicks on the anchor link.

4. Forth parameter: An optional parameter specifying the width in pixels of this menu (integer value). To skip it, enter null instead.

5. Fifth parameter: An optional parameter specifying the height in pixels of this menu (integer value). If the specified value is smaller than the default menu height, the script adds vertical scrollbars to allow the user to scroll the menu contents. To skip it, simply do not define any value for it.