This script has been replaced by a new with multi-level support
here.
This lightweight JavaScript drop down menu script (~1.6kb) allows you to easily add smooth transitioning dropdowns to your website. This can be used for navigation, dropdown lists, info panels, etc. The script has been tested working in IE6, IE7, IE8, Firefox, Opera and Safari. The markup for the menu including the mouse events looks like the following.
02 | <dt id="one-ddheader" onmouseover="ddMenu('one',1)"onmouseout="ddMenu('one',-1)">Dropdown One</dt> |
03 | <dd id="one-ddcontent" onmouseover="cancelHide('one')"onmouseout="ddMenu('one',-1)"> |
05 | <li><a href="#" class="underline">Navigation Item 1</a></li> |
06 | <li><a href="#" class="underline">Navigation Item 2</a></li> |
07 | <li><a href="#" class="underline">Navigation Item 3</a></li> |
08 | <li><a href="#" class="underline">Navigation Item 4</a></li> |
09 | <li><a href="#">Navigation Item 5</a></li> |
You can have as many dropdowns on one page as you like. Just be sure and have a unique naming scheme for each menu (i.e. one-ddheader, two-ddheader, etc). The “look and feel” is fully customizable though the CSS and you can replace the unordered list with any content you like if you are not looking for a menu.
This script has been tested in all major browsers and is available free of charge for both personal or commercial projects under the
creative commons license. Community support is
available here. Paid support is also available,
contact me for details.
