• Calendars
• Date & Time
• Document Effects
• Dynamic Content
• Form Effects
• Games
• Image Effects
• Links & Tooltips
• Menus & Navigation
• Mouse and Cursor
• Scrollers
• Text Animations
• User/System Preference
• Window and Frames
• Other
• XML and RSS

• Script Forums
• Recommend Us
• Usage Terms
• Free JavaScripts

Note: Oct 23rd, 06'- Script updated to version 1.1. See here for changed log.

Description: Blm Mult-level effect menu is a JavaScript/ CSS hybrid dropdown menu based on ordinary HTML lists. As its name suggests, it allows for infinite levels of sub menus. The menu supports many different visual options, all specified simply by inserting keywords inside the menu's "class" attribute. The menu has been tested and should work in most  standards compliant browser (IE5.5+, Firefox 1.5+, Opera 8.5+, Safari).

Demo:

See also: demo.htm

Directions

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:

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:

class="mlmenu vertical"

color class

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"

delay

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" 

accessible

With this switch enabled, any user with javascript disabled will still see the sub-menus. Use it if you have a sizable number of visitors with JS turned off. The only pitfall is that as a result, in IE6, this will cause the menu to "flicker" when the page loads.

class="mlmenu vertical blackwhite plus delay accessible" 

left

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"

Demo:

trail

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"

Effects

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.