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

• Dynamic Drive
• CSS Examples ►
• JavaScript Kit
• CSS Drive
• Coding Forums

---

Directions

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
<style type="text/css"> /* Sample CSS definition for the example list. Remove if desired */ .navlist li { width: 135px; background-color: #FFFFB9; padding-bottom: 2px; } </style> <link rel="stylesheet" type="text/css" href="anylinkvertical.css" /> <script type="text/javascript" src="anylinkvertical.js"> /*********************************************** * AnyLink CSS Menu script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com) * Please keep this notice intact * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code ***********************************************/ </script>

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
<!--1st anchor link and menu --> <a href="http://www.dynamicdrive.com" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, 'anylinkmenu1')">Web Design</a> <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> <!--2nd anchor link and menu --> <br /><br /> <ul class="navlist"> <li><a href="http://www.dynamicdrive.com">Dynamic Drive</a></li> <li onMouseover="dropdownmenu(this, event, 'anylinkmenu2')"><a href="http://www.dynamicdrive.com/style/" onClick="return clickreturnvalue()">CSS Examples</a> <span style="position: relative; left: 25px; font-family: Times New Roman">&#9658;</span></li> <li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li> <li><a href="http://www.cssdrive.com">CSS Drive</a></li> <li><a href="http://www.codingforums.com">Coding Forums</a></li> </ul> <div id="anylinkmenu2" class="anylinkcss" style="width: 160px; background-color: lightyellow"> <a href="http://www.dynamicdrive.com/style/csslibrary/category/C1/">Vertical CSS Menus</a> <a href="http://www.dynamicdrive.com/style/csslibrary/category/C2/">Vertical CSS Menus</a> <a href="http://www.dynamicdrive.com/style/csslibrary/category/C4/">Image CSS</a> <a href="http://www.dynamicdrive.com/style/csslibrary/category/C6/">Form CSS</a> <a href="http://www.dynamicdrive.com/style/csslibrary/category/C5/">DIVs and containers</a> </div>

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