Bookmark to del.icio.us
FF1+ IE5+ Opr7+
Blm Multi-level Effect menu
Note: Oct 23rd, 06'- Script updated to version 1.1. See here for changed log.
See also: demo.htm
Note: Before all else, you'll want to download "mleffect.zip", which contains all the files of this menu, plus examples. Below describes the basic instructions for installing this menu on your page:
Step 1: Insert the below code into the HEAD section of your page:
Step 2: Then, all that's left is to add the HTML for the menu to your page. The template looks like this:
As you can see, the menu is simple an ordinary list. The secret is the "class" attribute used in the outermost DIV tag, which contains various switches to toggle different menu settings:
class="mlmenu [horizontal|vertical] [effect] [arrow|plus] [delay] [trail] [left] [color class] [accessible]"
Below lists some of the possible variations:
Horizontal or vertical?
The first required switch that needs to be defined is whether the menu will be horizontal or vertical. For example:
The next required part is the name of the CSS classname to apply to colorize this menu. Two default classes are offered- "blackwhite" or "bluewhite":
class="mlmenu vertical blackwhite"
arrow and plus
The menu also comes with two ways to indicate that a menu will drop down- via an arrow ("arrow") or plus ("plus") sign. For example:
class="mlmenu horizontal bluewhite arrow"
This switches causes about a second pause before sub menus disappear. If the user moves there mouse back over the menu it will not disappear. This can make the menu feel more solid.
class="mlmenu vertical blackwhite plus delay"
class="mlmenu vertical blackwhite plus delay accessible"
In some pages it may be useful to have the sub-menus come out to the left and not the right. This switch will do that:
class="mlmenu vertical blindv arrow bluewhite left"
This switch causes an "trail" of links you have pased over to get to the current point in a sub menu. In other words, the parent menu item stays highlighted as you explore its sub menus:
class="mlmenu horizontal blindv arrow bluewhite trail"
In total the menu supports four visual effects when dropping down: "fade", "shake", "blindv" and "blindh". If a browser does not support an effect they will just see the menu like normal.