Dynamic Drive DHTML Scripts- AnyLink CSS Menu

AnyLink CSS Menu

Author: Dynamic Drive

Note: Updated August 15th 05': Now if menu doesn't have room to drop down nor down, it is positioned at top of visible window edge instead. Only "anylink.js" modified.

Description: AnyLink CSS Menu is a cool script that adds a drop down menu to any link on your page. Each menu is implemented as plain HTML (a DIV containing links) on the page, making the menu contents search engine friendly and potentially much easier to deploy and customize than menus where the contents are stored inside the script. And to top things off, the drop down menu behaves intelligently in that if it's too close to the four corners of the browser window, it will reposition itself to avoid being obscured partly.

Be sure to also check out AnyLink Drop Down Menu, which differs from AnyLink CSS 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.

Demo:

Webmaster Sites | News Sites

Dynamic Drive CSS Drive JavaScript Kit Coding Forums JavaScript Reference

CNN MSNBC Google BBC News

Directions

Step 1: This script uses two external files. Download "anylink.css" and "anylink.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:

Select All

<!--1st anchor link and menu -->

<a href="http://www.dynamicdrive.com" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, 'anylinkmenu1')">Anchor Link</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 -->

 <a href="http://www.dynamicdrive.com" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, 'anylinkmenu2')">Anchor Link 2</a>   
                                                    
<div id="anylinkmenu2" class="anylinkcss" style="width: 150px; background-color: lightyellow">

<a href="http://www.cnn.com/">CNN</a>
<a href="http://www.msnbc.com">MSNBC</a>
<a href="http://www.google.com">Google</a>
<a href="http://news.bbc.co.uk">BBC News</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="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, 'anylinkmenu2')">Web Design</a>

<div id="anylinkmenu2" class="anylinkcss" style="width: 150px; background-color: lightyellow">

<a href="http://www.javascriptkit.com">JavaScript Kit</a>
<a href="http://www.freewarejava.com">Freewarejava.com</a>
<a href="http://codingforums.com">Coding Forums</a>
<a href="http://www.cssdrive.com">CSS Drive</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. "anylinkmenu2" should be an arbitrary but unique ID you assign to each menu DIV on your page (<DIV id=uniqueID...>), which 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 "anylink.css."