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.
Then simply place this code in the head of the document.
Obviously, the menu is very configuarble. The secret is the class portion of the div tag
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
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.
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
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.
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
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
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.
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
fade
blindh
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
Thanks for great menu.
I got little configuration issue with the menu. My site requires menu to start from second level.
Thanks in advance ...
Super help for multimenu searchers - as me!! Thank you for all tips. This is the best and simple site how to make multi level menus.
Hey Mulhollem, congratulations from
Brasil, your script is amazing simple and very cool, as we say here
"Esse script é do caralho!"
Keep working.
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
whithout the [ lte IE6 ] fix in the top part it works great in IE6, IE7, FF2.
seems to be a buggy fix :)
greetings
hi. a one level submenu hangs the script when mouse-overing it more than one time. please help!
thans
Hi! 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.
Nice Script.:)
Could someone please tell me how to modify this menu's font size? Thank you.
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 ".horizontal ul li" in the css file. E.g.
.horizontal ul li{
float: left;
position: relative;
z-index: 9999;
}
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.
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.
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("1","dropdown1","content")
load("2","dropdown1","content","1")
load("3","dropdown1","content","1")
load("4","content")
...
...
and load should be like load("original id","name of dropdown","content","parent id")
it would be much easyer then doing
<ui><li></li></ul>
special when you need to make dinamical webpages with php, asp ....
:)
cheers!
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 :-)
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]
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.
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
script is not bad.
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.
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.
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.
Thans a lot, nice script, but question: How can I make the IE hack work on objects having "absolute" positioning?
Jason: This will be possible with the pro version(see my previous comment)
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.
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.
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 :)
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?
thanks for your script.
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!
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.
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.
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.
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...
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.
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...
Super: It took several hours to find this script which fits exactly what I've been looking for! Great work, thank you very much!!!
Very good script. Thanks for providing this script. I would like to include this in my next project.
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....
can you make one that does not require download?
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
perfect script, I like it very much
it's very bad... :(
love the script
a plain sample page might be usefull as theres no sample in the zip file
thanks
My script should work fine in place of that one.
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.
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?