AnyLink JS Drop Down Menu v2.3
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: This is an extremely versatile drop down menu script for ordinary links on your page, including image links. It can be activated either onMouseover or onClick. The menu contents are defined inside a shared .js file (ie: menucontents.js) for easy editing across multiple pages. Here's a listing of its 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.
Note that if a drop down menu is set to be revealed onClick on the anchor, the link inside the anchor is naturally disabled.
Enjoy taking regular links on your page to the next level with this script! Be sure to also check out AnyLink CSS Menu v2.0, which differs from AnyLink JS Menu in that the menu contents are defined inline on the page as regular HTML.
Demo:
Right dropping menu (click to reveal)
Directions
Step 1: This script uses three external files. Download them below (right click, and select "Save As"):
Step 2: Add the below code to the HEAD section of your page:
Step 2: Having done the above, all that's left is setting up your link(s) so a menu drops down. The below sample HTML demonstrates 3 links, one with the menu dropping down onMouseover, and the other, onClick:
Customization of the Drop Down Menu Contents
The very first step to customizing AnyLink Drop Down Menu is to familiarize yourself with the structure of the .js file that contains your menu contents, or "menucontents.js". To edit this file, open it up using any text editor. In it you'll find code blocks that each contain the contents for one particular drop down menu, for example:
var
anylinkmenu1={divclass:'anylinkmenu',
inlinestyle:'width:150px; background:#FDD271', linktarget:'_new'}
//First menu variable. Make sure "anylinkmenu1" is unique
anylinkmenu1.items=[
["CNN", "http://www.cnn.com/"],
["MSNBC", "http://www.msnbc.com/"],
["Google", "http://www.google.com/"],
["BBC News", "http://news.bbc.co.uk"] //no comma following last entry!
]
The above represents the entire definition for a single drop
down menu content. The variable in red, "anylinkmenu1",
should be an arbitrary but unique variable name that identifies this menu
content. Take a look at the first line, which lets you concurrently define the
drop down menu DIV's CSS class name (ie: "anylinkmenu"), any inline
CSS style (optional, set to '' to let the CSS class alone style the
DIV), and finally, the target of the links inside this DIV (optional, set to
'' for no target). Moving on, populate the array
menuvariable.items[] to define the actual links inside the drop down DIV,
one item per line, and no comma following the very last entry!
If you have many links inside a drop down menu, you may want to show them as columns of links (as seen in the last demo above). The syntax for such a drop down menu is the same as before, with the exception of the additions in red:
var
anylinkmenu1={divclass:'anylinkmenucols', inlinestyle:'', linktarget:'secwin'}
//Third menu variable. Same precaution.
anylinkmenu1.cols={divclass:'column', inlinestyle:''}
//menu.cols if defined creates columns of menu links segmented by keyword "efc"
anylinkmenu1.items=[
["Dynamic Drive", "http://www.dynamicdrive.com/"],
["CSS Drive", "http://www.cssdrive.com/"],
["Coding Forums", "http://www.codingforums.com/"],
["JavaScript Reference", "http://www.javascriptkit.com/jsref/",
"efc"],
["CNN", "http://www.cnn.com/"],
["MSNBC", "http://www.msnbc.com/"],
["Google", "http://www.google.com/"],
["BBC News", "http://news.bbc.co.uk", "efc"],
["News.com", "http://www.news.com/"]
["Digg", "http://www.digg.com/"],
["Tech Crunch", "http://techcrunch.com"] //no comma following last entry!
]
The optional menuvariable.cols={} property when set
tells the script to group the menu links into columns, with each column
consisting of a DIV element that carries the CSS class name specified in
menuvariable.cols.divclass. How many columns is created depends on how
many "cut off" points you insert inside your menu links. See the keyword "efc"
added as the 3rd parameter within certain menu links? This parameter when
defined causes the menu link following the current one to be added inside a new
column. It has no effect if the menuvariable.cols={} property
itself is not defined.
Customization of the anchor links
Now that you're familiar with how to define the menu contents themselves, lets move on to setting up the arbitrary "anchor" links on your web page that will display a particular drop down menu when the mouse rolls over it. The code of Step 3 above shows 3 anchor links; here's the first one:
<p><a href="http://www.dynamicdrive.com" class="menuanchorclass" rel="anylinkmenu1">Default Example</a></p>
Pay attention to the code in red, as they are mandatory for each anchor link. The required steps are:
-
Identify each anchor link on the page by giving them an arbitrary but common CSS class name (ie: "
menuanchorclass"). 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 variable name of the drop down menu inside menucontents.js the anchor should be associated with. In the above example, that would berel="anylinkmenu1".
Initializing the Menu
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("menuanchorclass")
</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.
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
"anylinkmenu.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>
Reveal menu onClick or onMouseover? Should menu drop down or to the right?
When setting up each anchor link, you can modify the behaviour
of its drop down menu so it's shown during "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="menuanchorclass" rel="anylinkmenu1[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="menuanchorclass" rel="anylinkmenu1" 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.
Global menu settings
Inside anylinkmenu.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:false, 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.