New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
Bookmark online:


FF1+ IE5+ Opr7+

AnyLink CSS Vertical Menu

Author: Dynamic Drive

Description:

Jan 19th, 09'- Script now deprecated. Use AnyLink CSS Vertical Menu v2.x instead, which supports both sub menus that drop down or to the right of the anchor using the same script.

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.

Demos:

Web Design


Directions Developer's View

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:

Select All

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:

Select All

Customizing

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:

<a href="http://www.dynamicdrive.com" onClick="return clickreturnvalue()" 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.javascriptkit.com">JavaScript Kit</a>
<a href="http://www.codingforums.com">Coding Forums</a>
<a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a>

</div>

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."