Multi-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, and in many browser will still run when javascript is disabled.





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.

<div class="mlmenu [horizontal|vertical] [effect] [arrow|plus] [delay] [trail] [left] [color class] [accessible]"> <ul> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a> <ul> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a> <ul> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </li> </ul> </li> </ul> </div>

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

<link rel="stylesheet" href="css.css"> <!--[if lte IE 6]> <link rel="stylesheet" href="hack.css"> <script type="text/javascript"> window.mlrunShim = true; </script> <![endif]--> <script type="text/javascript" src="js.js"> //This script Copyright Brady Mulhollem - WebTech101.com //This notice must stay intact for legal use </script>


Obviously, the menu is very configuarble. The secret is the class portion of the div tag

class="mlmenu [horizontal|vertical] [effect] [arrow|plus] [delay] [trail] [left] [color class] [accessible]"


Lets go over the options.

horizontal or vertical?

The first choice that needs to be made is whether the menu will be horizontal or vertical.Simply place your choice in the class like so

class="mlmenu vertical"

color class

The next required part is the color class. The default css comes with two blackwhite and bluewhite. You would use them like this.

class="mlmenu vertical blackwhite"

blackwhite

bluewhite

arrow and plus

The menu also comes with two ways to show that a menu will drop down. In any li element with a child ul will have a class of "haschild"

arrow

class="mlmenu horizontal bluewhite arrow"




plus

class="mlmenu vertical bluewhite plus"



delay

This option 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

This switch will cause the menu to "flicker" in older browsers when the page loads. This has an advantage though. Users with javascript disabled will see the sub-menus. Users of modern browsers(pretty much all except IE6) will never flicker and will work without javascript

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"




trail

This switch causes an attractive "trail" of links you have pased over to get to the current point in a sub menu.To get a good sense for what this does make sure move down a couple sub menus.

class="mlmenu horizontal blindv arrow bluewhite trail"




Effects

Now we get to the fun part! In total the menu currently supports four effects fade,shake,blindv,blindh. If a browser does not support an effect they will just see the menu like normal.

shake

class="mlmenu horizontal bluewhite shake"




fade

class="mlmenu horizontal bluewhite fade"




blindh

class="mlmenu horizontal bluewhite blindh"




blindv

class="mlmenu horizontal bluewhite blindv"




Browser Support

The menu has been tested in IE6,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.

Download

You can download zip file with everything required here.


Warning: WARNING: Comments is not properly cleaning input params. in /home/freegam4/public_html/webtech/lib/classes/class.module.inc.php on line 1500

Comments

Posted on March 12, 2008, 5:08 am by Mehdi

Hi
I have used this menu on my website. its a very great menu thanks. but i have problem with internet explorer. I have very big xml data file that i use in this menu. when i use the multi level menu it hangs sometime and it seems to IE refreshing. there is not such a problem with firefox. do you have any idea to fix this?

Posted on February 16, 2008, 1:50 pm by nitin pawar

Thanks for great menu.

I got little configuration issue with the menu. My site requires menu to start from second level.

Thanks in advance ...

Posted on February 11, 2008, 6:07 am by postny

Super help for multimenu searchers - as me&#33;&#33; Thank you for all tips. This is the best and simple site how to make multi level menus.

Posted on January 22, 2008, 2:02 pm by Siegfried Wiederhecker

Hey Mulhollem, congratulations from Brasil, your script is amazing simple and very cool, as we say here &quot;Esse script é do caralho&#33;&quot;
Keep working.

Posted on December 6, 2007, 11:35 pm by Dipan

hi Brady
thanks a lot for such wonderful sctrip.
I am facing the problem for this menu.

I have 2-3 forms in one page. i have set your code on left side of page.which is working in Firefox, but not working in IE.

when i m putting only your code without my forms then its working.
Please guide me for this.

I m stuck in this.
Please help me.

Avidly waiting for your reply.

regards
Dipan

Posted on November 28, 2007, 4:55 am by weer

whithout the [ lte IE6 ] fix in the top part it works great in IE6, IE7, FF2.

seems to be a buggy fix :)

greetings

Posted on November 28, 2007, 4:36 am by juul dijk

hi. a one level submenu hangs the script when mouse-overing it more than one time. please help&#33;

[email protected]

Posted on November 16, 2007, 8:06 pm by everest

thans

Posted on November 1, 2007, 10:23 am by Nakio

Hi&#33; i have IExplorer 7.0.6 and my horizontal menu doesn´t work. On Mozilla Firefox it looks fine.
I´m testing the script in http://www.mkcsolutions.es/hmv/v3/index.htm and i don´t know what to do.

Please help.

Thanks, Nakio.

Posted on October 16, 2007, 11:31 pm by Sandeep

Nice Script.:)

Posted on October 4, 2007, 4:37 pm by Ben

Could someone please tell me how to modify this menu&#39;s font size? Thank you.

Posted on October 2, 2007, 9:10 am by Dave

Thanks for the great script. Will use this a lot.

I noticed that the dropdowns were appearing behind other un-ordered lists in IE6/7. You can get around this by adding a z-index to the element &quot;.horizontal ul li&quot; in the css file. E.g.

.horizontal ul li{
float: left;
position: relative;
z-index: 9999;
}

Posted on September 15, 2007, 5:56 pm by Misty

By the way, the multi level menus work on IE 7 for Windows and Safari, FireFox and Netscape on Mac. They do seem to work on Netscape 9 and FireFox 2.0.0.6 for Windows. Thanks.

Posted on September 14, 2007, 5:36 pm by misty

Hi Brady,

Thanks so much for the multi level menu scripts, which are what I need for my web site.

Because the Word Press theme has its own CSS that defines ul() and li(). How do I utilize WP ul() and li() while using your mlmenu? Your pointers will be greatly appreciated.

Posted on August 31, 2007, 6:53 am by Hiper

Realy like your script ;) all what i need for any dd-menu :)

just in your next version try to make some preloader for making categories and subs like:

load(&quot;1&quot;,&quot;dropdown1&quot;,&quot;content&quot;)
load(&quot;2&quot;,&quot;dropdown1&quot;,&quot;content&quot;,&quot;1&quot;)
load(&quot;3&quot;,&quot;dropdown1&quot;,&quot;content&quot;,&quot;1&quot;)
load(&quot;4&quot;,&quot;content&quot;)
...
...

and load should be like load(&quot;original id&quot;,&quot;name of dropdown&quot;,&quot;content&quot;,&quot;parent id&quot;)

it would be much easyer then doing &lt;ui&gt;&lt;li&gt;&lt;/li&gt;&lt;/ul&gt; special when you need to make dinamical webpages with php, asp ....
:)

cheers&#33;

Posted on August 10, 2007, 3:00 am by ben ward

hey love the script works very well apart from one bug. in IE (running latest) it cuts of the bottom a few pixels off each link you can still read what is said but it looks horrible. no problems in mozilla though.

also im quite new with script can somnebody tell me where i can edit the sizes so it fits in my webpage properly please. thankyou :-)

Posted on July 11, 2007, 4:32 am by Allahverdi

Hi All!
I liked the script and want to use it in my web page. I need help with it. I cant make this script if anyone can send me already creadted script i will very happy!!!Send to my e-mail please... [email protected]

Posted on June 21, 2007, 12:40 am by Aahz

Oh yeah, the second level submenus on this page, the DD page, and the demo.htm page (included with the DD version) all work fine in both browsers. It's just my page that they won't work in FF.

Posted on June 21, 2007, 12:38 am by Aahz

I was very excited to find this script as I was using the hvmenu from Dynamic Drive, but it was slowing my page loads significantly. Unfortunately....

I've spent about 8 hours with this script tonight and am still having the same problem. Everything works fine in IE7, but in FF2.0.0.4 the second level sub-menus won't appear (or even be indicated by the presence of an arrow).

This first manifested with the DD script. Then I found your site and upgraded to the version here. Not only did that not fix the problem, but then in IE all my submenus had a blank row between each entry. Very ugly.

So, I switched back to the DD version which works fine, except for the lack of second level submenus in FF :(

You can see the page where I've installed it at http://www.itswickedfun.net/reference/monsters3.html

Posted on June 13, 2007, 11:54 pm by Archana

script is not bad.

Posted on June 8, 2007, 7:27 pm by Brady Mulhollem

The menus should not be displayed while the page is loading. I can only think of one way this happening. The CSS will hide the sub-menus while the page loads. Then, the script takes over. In the small space of time between the script starting and manualling hiding the sub-menus. So, for the sub-menus to be visible your computer is probably older, or the menu is huge. Without a link to the page, there is no way for me to tell exactly.

Posted on June 8, 2007, 4:50 pm by Nick

I didn't test this but I think the guys complaining about the sub-menus being displayed should check the "accessible" option. It clearly states that using that will prevent this side-effect for users that have javascript disabled. It might be the solution.

Anyway, the menus on this page are all OK and I don't see the sub-menus displayed. I'm using Firefox 2.0.0.4.

Posted on June 8, 2007, 1:27 pm by LLS

Love the script. One tiny little bug for me though, and as James mentioned below: the entirety of the menu, in all its levels, shows visible and expanded on the page while the page is initially loading. Is there any way to stop that from happening? I'd appreciate any feedback on this.

Posted on June 5, 2007, 6:42 am by Bassi

Thans a lot, nice script, but question: How can I make the IE hack work on objects having "absolute" positioning?

Posted on April 19, 2007, 12:41 pm by Brady Mulhollem

Jason: This will be possible with the pro version(see my previous comment)

Posted on April 19, 2007, 2:49 am by Jason

Your script is great. But I do have difficulties when this is place near the bottom of the screen. Since it is dropping down when I placed my mouse over it, is it possible to make it drop upwards instead? Or is there anyway to make it drop upwards?

Thanks in advance for any feedback you can give.

Posted on April 17, 2007, 1:53 pm by Brady Mulhollem

JMB: Running the latest firefox right now. I would need to see a test page to diagnose the problem.

DM: The script is designed to operate with other scripts on the page without a problem. My guess is that it is the table. The script was not tested under these circumstaces.

To Everyone: Look for a "pro" version of this script to be avaliable on this site for about $10 sometime soon! This version will include image support(any kind you can possibly imagine!), different colors on submenus, new effects(including a way to integrate with several JS libraries to produce more advanced effects), option to open on click, better delay support, and was fully tested all the way back to IE5.5! On top of that, I've been stress testing the new version with menus with over 3000 links, so the pro will offer a better tested menu, with better support, and some of the most requested features! Of course, this version will remain free.

Posted on April 4, 2007, 7:41 am by DM

Wondering about conflict with other scripts on page.. i have several others, and when this great menu is placed on the same page it will not run...
Also is there a conflict when placed in a table?

Your coments r much appreciated :)

Posted on March 21, 2007, 10:06 pm by JMB

Brady love the script! Easy to use and worked instantly. One question - Did a test in Firefox 2.0.0.3 (I think that is the version)and all child menus are exposed. Any suggestions or fixes?

Posted on March 21, 2007, 2:31 pm by dayyan

thanks for your script.

Posted on March 7, 2007, 4:12 pm by James

Great script. However, on each page load the all the child menues are fully exposed. Any ideas on keeping them from doing that? Again, great work!

Posted on February 16, 2007, 10:08 am by Anna

Great stuff. It works very vell on one site. But I put it in a frameset (left_frame). What's to do, that all menues are visible?? The submenues have to "flow" over the frame border into the main_frame.
Thanks.

Posted on February 11, 2007, 11:33 am by Brady Mulhollem

Dino: I would imagine that playing with the z-index would solve your problems.

vamsidhar: Sure, you can modify the colors of the menu. Take a look at the css.css file. The two colors I have given should be a good example.

Posted on February 9, 2007, 10:02 am by Dino

This is a great script but when I use the vertical menu and set "vertical li ul{left: 50px;" so that the child elements open half-way over the parent elements, the child elements open behind the parent elements and are not visible. This is happening in IE6 and IE7. Is there a fix for this? Also if the child elements open over a table/td in IE7, the td contents show through.

Posted on February 8, 2007, 11:54 pm by vamsidhar

Can I add my css affects... like padding and colors just instead of blackwhite or blue white can i use other colors?? if so any one help me out...

Posted on February 8, 2007, 7:14 pm by VTWebProperties.com

chickanna -

You can build the list items within a loop of a recordset - this is what I am doing and it works quite well. So long as your recordset is ordered in a way that provides for your hierarchy you test a "switch" condition.

Posted on February 7, 2007, 12:15 am by chikkanna

the code which you have given is only for static content... is there any other way that i can change/create the menu items dynamically by creating the menu using the contents which is stored in the database...

Posted on January 26, 2007, 2:23 am by uwe6a

Super: It took several hours to find this script which fits exactly what I've been looking for! Great work, thank you very much!!!

Posted on January 22, 2007, 1:47 am by Soniya

Very good script. Thanks for providing this script. I would like to include this in my next project.

Posted on January 8, 2007, 3:04 am by Paul

Just want to say that I have spent the last 3 days searching the web for a script like this. It is P-E-R-F-E-C-T. Hats off to you....

Posted on January 7, 2007, 9:29 am by unknown

can you make one that does not require download?

Posted on January 6, 2007, 6:24 am by WaKKo

How about making a dropdown that puts the subitems between the mainitems onclick ?
So like this :

MAIN 1
MAIN 2
sub 1
sub 2
sub 3
subsub 1
subsub 2
sub 4
MAIN 3
MAIN 4

Posted on November 21, 2006, 2:30 pm by Jurek

perfect script, I like it very much

Posted on October 25, 2006, 5:16 am by Bill

it's very bad... :(

Posted on October 23, 2006, 3:05 pm by cokodidi

love the script
a plain sample page might be usefull as theres no sample in the zip file
thanks

Posted on October 22, 2006, 6:40 am by Brady Mulhollem

My script should work fine in place of that one.

Posted on October 22, 2006, 6:00 am by James

I love your script and have a few questions - I have downloaded your menu and am interested in creating a template for a site I am working on where it would stay in set in place and not move in the following look - http://www.entertainmentbookingsource.com/test.html.
as you will see from that page example, when you resize the page the original menu script I tried to use there moves all over the place and does not stay set with the rest of the site (justified left to right within the framework). I just dont know how to overcome that.
That is why I am coming to you for assistance and potentially to use your script.
What do you think.
Thanks in advance for any feedback you can give.

Add A Comment

What does three minus two equal?
Your Name(*):
Email:
Comment(*):