AnyLink CSS Menu v2.4
Note: Updated June 29th 15 to v2.4: Removed script powered shadow effect. Just use CSS3 if you wish a drop down menu to carry a shadow
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
Mouseoverthe anchor link, orClickinstead. - 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:
Demo #2: Menu with multiple columns
Demo #3 (sub menus drop to the right of anchor):
Resources
Demo #4 (image anchor with two states):
Directions
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:
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:
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:
-
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. -
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 berel="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="ud", 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.