Multi-Level Effect Menu Pro
Multi-level Effect Menu Pro is a very configurable product. However, I have done my utmost to make it as easy as possible to do. So, though Multi-Level Effect Menu Pro has a lot of options, it will always be simple and easy to use(Without JavaScript, of Course!). How do we manage this, well basically it is through the use of the "class" attribute of elements. Below is the basic HTML needed to create a menu.
With this code in <head> of the document
The above will create a simple horizontal menu that looks like this. See Demo
Obviously, this menu leaves a lot to be desired, but it highlights a very important point. How did Multi-Level Effect Menu know to transform that simple list of links into something better, and how did it know what you wanted it to look like. As I said before, the trick is the class attribute of the div tag. All you need to do is make sure that the div tag contains a class of mlmenu, and the script will find it. Then, you add in any options you would like. The two basic options are orientation and color.
Orientation
The menu system supports both horizontal and vertical orientation. To use them simply add either 'horizontal' or 'vertical' to the class of the div tag. So if you wanted a horizontal menu you would do this
Or perhaps you would prefer a vertical menu.
Color
The default menu comes with a single color 'blackwhite'. However, there is a large number of extra colors available for download. And it isn't too difficult to create your own. To select a color just pass it in as a class(many demos of that up above).
Create your own
Creating your own color scheme isn't very difficult. All you need to is take the default color scheme and modify the color values. You can find them at the very end of the 'css.css' file. You will also notice a part that has been commented out. This CSS will allow you to apply different colors to submenus
Styling
Multi-Level Effect Menu Pro is a huge improvment over the original in the style department. Let's face it, changing the colors is all fine and good, but sometimes you just want more. Luckily, Multi-Level Effect Menu is here to provide.
Images
There are many different ways to add images to the menu. The most basic is the 'image' option. This will add a background image to every single link in the menu, and whenever the user rolls over the image it will change the background image. These images must be found in an images folder in the same folder as css.css, and they must be called image.gif and image-hover.gif. Of course, you can change the name of the files, but it will require changes to css.css. If you need help with these changes, ask for help in the support forum. Or maybe you would only like to add a background to the top images? Well, then use 'topimage', and of course, 'subimage' is also available. For subimage, the images will be called sub-image.gig and sub-image-hover.gif.
Now sometimes a uniform background image isn't enough. Sometimes you need individual images. To do that use the 'images' option. You can add 'images(top)' to add individual images to all top level links, or images(all) to add it to all links. The image file name will follow very specific rules. It will be identical to the text in the link, but with all spaces replaced by spaces and in lowercase. So, for example, if you link says 'Internet Explorer', then the filename for the image will be 'internet_explorer.gif'. Formats other than gif are easy to use. Simply pass in a different format with the 'ext' option. So, you could use PNGs by adding ext(png), or JPEGS by adding ext(jpg). Please note, that these images files must also be in a folder called 'images'. However, if you are using individual images, then you can change the folder with the 'folder' option. Simply pass in a new folder. So you could change the folder to SomeCrazyFolder with 'folder(SomeCrazyFolder/)'. Notice the trailing slash. Of course, the menu also changes the image on hover. It does this by adding '-hover' to the filename. So if the filename is 'internet_explorer.gif', then the file 'internet_explorer-hover.gif' will be used when the image is rolled over. If you use 'images(all)' there are two more options available to you. "images_start" and "images_end". You give them a number and they will use it for the starting and stopping of the images at a certain depth level. So you could use 'images_start(2)', and everything but the first level links would have custom images, or 'images_end(2)' which is the same as 'images(top)'. Of course, they can be combined like 'images_start(2) images_end(3)' which would add images to only the 2nd and 3rd levels.
Icons
Sometimes it can be pretty useful to add a small icon to every link. To do that you use the 'icon' option. Before attempting this make sure you have read the Section on individual images, as they are very similiar. To use the icon option you have two choices. You can use a single image. To do that you would use something like 'icon(icon.gif)', or you can use individual icons by using 'icon(individual)'. The icon names will be created the exact same way as the individual image code. Also, just like with the other images, it is possible to specify the starting and stopping level for the icons with 'icons_start' and 'icons_end'.
 blackwhite){kind=link}
Padding
You may have noticed that some of the demos up to this point that included icons or background images have needed some space added to make the text slide over. You can do that with the 'text_padding' and 'icon_padding' options. You merely pass them a number, in pixels, that is used to add space to the left of the text or icon, respectively. So for instance you could add ten pixels to the left of the text like this 'text_padding(10)'.
Borders
One of the best new features in the version is the ability to remove the borders, and optionally add an outline around the whole menu. To use these just add 'noborders' to remove all borders, 'subnoborders' to remove all borders besides the top level ones, 'outline' to outline every level, 'suboutline' to outline only the sub levels.
Effects
Now the fun part, and one that has been vastly improved uder the surface for the Pro version. Multi-level Effect Menu Pro includes many efect to help spice up the menu. I mean, it's even in the name!. The best part about the effects is that they will not interfere with browser that don't support them, so you can use them without a second thought.
Shake
This effect has been improved the most, and now supports a new mode. To shake horizontally, add 'effect(shake-h)' and to shake vertically add 'effect(shake-v)'.
Blind
One of the best effects of the original version has returned. Add a simple blind down effect with 'effect(blind-v)' and a blind left effect with 'effect(blind-h)'.
Fade
The old and trusty fade effect. No site is complete without it. With two modes pulse, 'effect(fade-pulse)', and smooth, 'effect(fade-smooth)'.
jQuery
jQuery is one of the many javascript toolkits out there. And for me, it was love at first sight. One of my favorite parts about jQuery is its amazing effect toolkit. So, I decided to write a simple(and optional) integration between the two. Please note that to use this effect, you MUST include the jQuery file avaliable from their site. So, how does the integration work? Well at the simplest level you can do this 'effect(jquery-Shake)' or 'effect(jquery-BlindDown)', and get the jQuery equivalent of some of the effects Multi-level Effect Pro offers. If this is all you want I reccommend you stick with the built in effects. However, if you are craving the power of jQuerys animate function, then read on. I won't go into the details but you can do something like this. 'effect(jquery-animate.height:show.width:show.opacity:show.speed:1)'. What does that do? Well, it blinds down, blinds left, and fades in the menu all at once!
Scriptaculous
Similiar to the above, but without the cool animate stuff. Most of the time you won't have a reason for this, and it can be very buggy with some of Scriptaculous Effects. Basically, it allows you to integrate with the Scriptaculous library. Once again, I feel an example is best suited here. So you can use 'effect(scriptaculous-Shake)' or 'effect(scriptaculous-BlindDown.duration:3)'.
Other Options
Here you will find all the extra things. Many of these are very powerful important options, so make sure to read carefully.
Delay
Multi-level Effect Menu Pro supports a delay before the menus closes(if the user doesn't mouse back over in time). To use it simply use the 'delay' option. It is measured in seconds. So 'delay(1)' adds a one sencond delay, while 'delay(2.5)' adds a two and a half second delay.
Child Identifiers
You may have noticed that up until this point there has been no way to tell if a link would open a submenu. That changes now. The options is called 'child' and you can pass in any string you like. So you could use 'child(+)' or maybe 'child(>)', but wait there's more! You can also pass in an image file that can be found in the images folder(or another folder if changed with folder option). So 'child(child.gif)' also works. You can also add 'childright' to the class to make child identifier align to the right.
 icon_padding(7) child(child.gif) childright){kind=link}
Menu Direction
What happens if you want the menu to open in a direction other down and to the left. Well, that is what the options 'left' and 'up' are for, and the do exactly what you would think!
Trail
Trail is a visiually applealing option to show the user where they are in the menu. It is easiest to see a demo. So click the demo link already!
Open(Changing the target)
This option makes it possible to have links open in a frame or a new window. Simply use the 'open' option. So for instance, 'open(_blank)' will open all links in a new window, and 'open(some_frame_name)' will open the links in a frame named 'some_frame_name'.
Test Center
You can type in your own class options into the form below, and the click 'Test' to see what they will look like!