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 Menu v2.3

Author: Dynamic Drive

Note: Updated June 28th 11 to v2.3: Menu updated to work properly in popular mobile devices such as iPad/iPhone and Android tablets.

Description: AnyLink CSS Menu is a flexible menu script that adds a drop down menu to any link on your page. Each drop down menu is simply implemented as plain HTML on the page, making them search engine friendly and easy to edit and deploy. The script supports a myriad of subtle but appealing features:

  • Two different toggle methods- Each menu can be activated either Mouseover the anchor link, or Click instead.
  • Two different orientations, "ud" or "lr"- Each menu can be set to either drop down below the anchor, or to the right of it instead. The later is desirable if the anchors are "side bar" or "vertical" links.
  • Menu repositions itself if too close to any of the window's four edges to avoid being obscured.
  • Ability to style the currently selected anchor link using CSS, or for image anchors, toggle between two images. v2.1
  • Global settings to set the delay before each menu disappears onMouseout, whether to enable shadows, and last but not least, a fade-in effect when the menu is revealed.

A drop down menu is associated with an anchor link on the page just by inserting a "rel" attribute inside the later that points to the desired menu's ID attribute.

Note: Be sure to also check out AnyLink JS Drop Down Menu, which differs from AnyLink CSS Menu 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 #1:

Webmaster Resources

Demo #2: Menu with multiple columns

Demo #3 (sub menus drop to the right of anchor):

Demo #4 (image anchor with two states):


Directions Developer's View

Step 1: This script uses two external files. Download "anylinkcssmenu.css" and "anylinkcssmenu.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 contains 3 demos showing how to set up both the Anchor link and drop down menu associated with it:

Select All

Customization

This script is very easy to customize and is flexible. The code of Step 3 shows the basic code for an Anchor link and its associated menu:

<p><a href="http://www.dynamicdrive.com" class="anchorclass" rel="submenu1">Anchor Link</a></p>


<div id="submenu1" class="anylinkcss">
<ul>
<li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
<li><a href="http://www.cssdrive.com">CSS Drive</a></li>
<li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
<li><a href="http://www.codingforums.com">Coding Forums</a></li>
<li><a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></li>
</ul>
</div>
 

The Anchor link in this case is "Anchor Link, 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 drop down menu you're setting up. The required steps are:

  1. Identify each anchor link on the page by giving them an arbitrary but common CSS class name (ie: "anchorclass"). This tells the script that these links carry a drop down menu. Assuming for example there are 3 links on your page with a drop down menu- add the same CSS class name inside all 3 links.

  2. Next, insert a "rel" attribute inside the anchor link that points to the ID attribute of the drop down menu it should be associated with. In the above example, that would be rel="submenu1".

With all of your anchor links and drop down menus defined using the above procedure, inside the HEAD section of your page, initialize the script by calling:

<script type="text/javascript">

//anylinkcssmenu.init("menu_anchors_class") //Pass in the CSS class of anchor links (that contain a sub menu)
anylinkcssmenu.init("anchorclass")

</script>

Where the code in red, you guessed it, should be the name of the shared CSS class name that identifies the anchor links on the page.

Anchor Link specific customizations

When setting up each anchor link, you can modify the behaviour of its drop down menu so it's shown when "onclick" instead of "onmouseover". To do so, add a "[click]" suffix to the original "rel" attribute definition. For example:

<p><a href="http://www.dynamicdrive.com" class="anchorclass" rel="submenu1[click]">Anchor Link</a></p>

Valid values for the "rel" attribute: rel="dropmenuid", rel="dropmenuid[mouseover"], or rel="dropmenuid[click]".

To get the menu to drop down to the right of the anchor link instead of the default below it, add an extra "rev" attribute inside the anchor with a value of "lr':

<p><a href="http://www.dynamicdrive.com" class="anchorclass" rel="submenu1" rev="lr">Anchor Link</a></p>

Valid values for the "rev" attribute: undefined, rev="up", or rel="lr".

You can define both of the above at the same time obviously.

Styling the currently selected anchor link

To help users identify the anchor the mouse is currently over, you can style it so it appears distinct. The script dynamically adds a CSS class of "selectedanchor" to the currently selected anchor link (assuming its a text link), and removes the class when it's no longer active. Simply customize this class inside "anylinkcssmenu.css" as desired:

.selectedanchor{ /*CSS class that gets added to the currently selected anchor link (assuming it's a text link)
background: yellow;
}

You can refine the above so different groups of anchor links get a different selected style. The key is just to harness CSS's ability to limit the element(s) a CSS class gets applied to, by requiring that multiple CSS classes be present. For example, the following CSS applies two different backgrounds to the selected anchor link, depending on whether the anchor also contains another CSS class:

.group1.selectedanchor{ /*CSS class that gets added to the currently selected anchor link that carries the "group1" CSS class*/
background: yellow;
}

.group2.selectedanchor{ /*CSS class that gets added to the currently selected anchor link that carries the "group2" CSS class*/
background: lightblue;
}

If your anchor is an image link, you can insert two custom HTML attributes, "data-image" and "data-overimage", to specify the image that gets shown during the default and selected states. Simply specify the full paths to the two images, for example:

<a href="http://www.dynamicdrive.com" class="menuanchorclass" rel="anylinkmenu4" data-image="news.gif" data-overimage="newsover.gif"><img src="news.gif" style="border-width:0" /></a>

Global menu settings

Inside anylinkcssmenu.js, there are a few effects related settings at the top that affect the drop down menus in general. They are:

effects: {delayhide: 200, shadow:{enabled:true, opacity:0.3, depth: [5, 5]}, fade:{enabled:true, duration:500}}, //customize menu effects

200 and 500 are in units of milliseconds (ie: 1000=1 second). 0.3 should be a decimal between 0-1. Finally, [5, 5] should be two integers that determine the length of the shadow in x and y directions, in pixels.