AnyLink CSS Vertical Menu
This is a vertical (drop to the right) version of Anylink CSS Menu that can be used on arbitrary links or vertical menus to instantly add a drop down menu to them. Each drop down menu is implemented as plain HTML (a DIV containing links) on the page, making the menu contents search engine friendly and easy to define.
Be sure to also check out AnyLink Vertical Menu, which differs from AnyLink CSS Vertical Menu mainly in that the menu contents are specified inside the script. If your site is dynamic, this may be an easier script to deploy across the entire site.
Step 1: This script uses two external files. Download "anylinkvertical.css" and "anylinkvertical.js" (by right clicking each file, and selecting "Save As"). Be sure to upload them to your webpage directory.
Step 2: Add the below code to the HEAD section of your page:
Step 3: Add the following sample HTML to the BODY of your page, which demonstrates how to set up both the Anchor link and drop down menu associated with it:
This script is very easy to customize and is flexible. The code of Step 3 shows the basic code for an Anchor link and associated menu:
onMouseover="dropdownmenu(this, event, 'anylinkmenu1')">Web Design</a><br
<div id="anylinkmenu1" class="anylinkcss">
<a href="http://www.dynamicdrive.com/">Dynamic Drive</a>
<a href="http://www.cssdrive.com">CSS Drive</a>
<a href="http://www.codingforums.com">Coding Forums</a>
The Anchor link in this case is "Web Design", and the drop down menu, the entire DIV that follows it. You can place the DIV anywhere on your page you see fit, and not necessarily directly below the anchor link.
Pay attention to the code in red, as they are mandatory for each Anchor Link plus Menu you're setting up. "anylinkmenu1" should be an arbitrary but unique ID you assign to each drop down menu DIV on the page, with this ID entered into the Anchor Link:
onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, 'uniqueID')"
This lets the Anchor Link know which menu to reveal. Apart from this, you can customize the look of your DIV very liberally, either by adding a style="" attribute inside the tag, or edit the css of "anylinkvertical.css."