AnyLink Vertical Menu
Description: This is an alternate version of our AnyLink Drop Down Menu that works with vertical links instead. The menu is positioned to the right of the link, and works with most types of links, whether it's a regular text link, image link, or even a table cell or list (<li>) that happens to contain a link. Furthermore, this script detects the four corners of the browser window and readjusts the menu so it's always in view.
The script works in all the major DHTML browsers- IE4+, NS6+, and Opera7+. You can specify a valid default URL for each link for other browsers to navigate to. Cool!
Demo: Below shows using AnyLink Vertical Menu on a regular text link and <li> element, respectively:
Directions
Step 1: Insert the following style sheet and script into the <head> section of your page:
Step 2: Having done the above, all that's left is setting up your link(s) so a menu drops down. The below sample HTML demonstrates setting up the menu on either a regular text link or a list element (<li>):
The dropdownmenu() function inside the code of Step 2 accepts 4 parameters as shown:
dropdownmenu(this, event, menuarray, 'width')
Only customize the last two parameters (menuarray and 'width'), where:
3) Menuarray- The array contents you wish the menu to display (see code of Step 1).
4) Width- The width of the menu, in pixels.
And that's about it!
Useful Information
As shown in the demo, this script can be associated not just with a regular link (<a>), but also other elements such as a list <li>, a table cell <td> etc. For non regular links, the trick is to make sure the element that will activate the menu has a width defined somewhere. Lets take the example of the list in the demo above:
<ul class="navlist">
<li><a href="#">Dynamic Drive</a></li>
<li onMouseover="dropdownmenu(this, event, menu2,
'150px')" onMouseout="delayhidemenu()"><a href="#">JavaScript
Kit</a></li>
<li><a href="#">CSS Drive</a></li>
<li><a href="#">Coding Forums</a></li>
</ul>
Here instead of inserting the onMouseover code inside a standard <a> tag, we add it inside a <li> to activate the menu onMouseover. This works, but only if the <li> has a width defined for it, which if you examine the CSS of step 1, you'll see it does:
.navlist li {
width: 135px;
"
"
}
A width needs to be defined either for the <li> (or <ul> instead if you like) in this case, since without it, the menu has no way to know how far to display the menu to the right of the element, and typically will display the menu too far away from the element as a result. So simply remember, when using this script on elements other than a text link, make sure the element has a width defined, either explicitly, by way of an external CSS, or its container.