|
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
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 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.
|
Menu and Navigation 
