TIP - To keep your main (html) - page neat and easy to read, you can put the head or body javascript into an external .js file (minus html tags) and reference it from your page thus -
<script language="JavaScript1.2" src="MY.js"type="text/javascript"></script>



Anylink Vertical Menu.



 Web Design  |  News Sites  (onclick)



Note: Updated August 2nd 05': Added border around each menu item, improved menu positioning behaviour. (To open links in new window add 

target="_blank"

 

to your links in 'contents array' - set in <head>).
Description: This is an extremely versatile drop down menu script for ordinary links on your page, including image links. It can be activated either onMouseover or onClick. The menu intelligently determines whether the dropped menu is too close to the browser's edge, adjusting its positioning so it's always in view.



Right-click - 'select all' (ctrl-a) then copy (ctrl-c) and paste to 'HEAD' of your page.




Right-click - 'select all' (ctrl-a) then copy (ctrl-c) and paste to 'BODY' of your page.




This 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.
The dropdownmenu() function 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 (pass in "" if you simply wish to use the default menu width).
More information on customizing the menu:
Inside the code of Step 1, a few items are available for customization. Firstly, the style sheet can be used to add additional visual styling to the menu, excluding default menu width and background color, which are controlled by two variables within the script that follows. You can also specify the disappearance delay of the menu when the mouse moves out of it.