Multi-level Effect Menu

Mult-level effect menu is a very configurable javascript/css hybrid dropdown menu. It is capable of producing simple menus(both horizontal and vertical) or more advanced ones like the below. It should work in any standards compliant browser and IE.This menu has a number of fixes for different browsers to provide a consitent cross-browser script.

As the above shows it is capable of producing multiple menus on a single page.In fact you can have an unlimited number of menus. All produced with the following markup.

Then simply place this code in the head of the document.

So lets go over the options

Base

The very minimum required to the menu is the following

The first choice to make is horizontal or vertical. You simply place your choice right in the class portion. You also need to pick a color scheme. The default css icludes two blackwhite and bluewhite. Here's what we have so far.

Effects

The menu is capable of producing five effects(only four in Internet Explorer). They are blink,shake,fade,blindv,blindh. To use them you simple inlcude them in the class name.

Blink

Shake

Fade

Now works in Internet Explorer

Blindh

Blindv

Other Switches

The menu also supports two other "switches" unlike effects they may be both used at once

arrow

This switch will add a small arrows to any menu that has a submenu. The javascript always adds a class of "haschild" to an li element that would have an arrow.There is a small Internet Explorer bug with this switch that will cause the menu to have a slighly larger height that other browsers. In most cases this can be ignored.

plus

Similiar to the above this switch will add a + sign. It can be used with arrow but I don't see why you would want to!

delay

This switch will cause a small delay before the menu disappears. This helps make the menu feel a little more solid.

inaccesible

This switch will prevent the "flickering" when the page loads. This comes at a price though. Users with javascript disabled will not see the sub-menus. To negate this make top-level links point to a sitemap to prevent confusion

Browser Supports and downloads

The menu has been tested in IE6(IE5.5 partial,there is slight issues with alignment and borders),Firefox 1.5+ and Opera 8.5+. The latest Safari release was tested on an older version of the script and was found to work.. All required files plus this page may be downloaded here

This menu is created by Brady Mulhollem. If you have any questions or comments you can email me at blm126 [AT] gmail.remove.this.com.