ADxMenu – multilevel menu built from nested HTML lists – is my pride and joy. I began working on it last year, always implementing the good stuff I learned on the web standards road. In its current incarnation, I believe it’s best of the breed. There are other menus out there (using the very similar HTML base), but most of them can, at most, measure up to ADxMenu standard.
With that said, I want to repeat what was my target from day 1. It’s valid, standard-compliant web sites. If you have an old-school web site with nested tables and no DOCTYPE – do not bother; you have other things to conquer first. On the other hand, if you are a CSS newbie/inter/pro – you are welcomed. You will need good CSS skills to create attractive menus though; I did my best to give you a good starting point, for 4 different variants of the menu, but the final look is up to you.
There are many old-school menus with large scripts and over-bloated markup. Those few that are good and light are not free. ADxMenu3 is free to use on any kind of site, as long as you give proper attribution.
Versions
ADxMenu3 comes in three flavors.
Standard version is for sites with no forms (at least no select boxes in forms), and for small menus. Long menus tend to fall out of the visible part of the screen, which is not very user friendly.
Professional version builds on the standard, adding WCH implementation. That means that your menus will be placed above any form element on the page, including the select boxes in IE (the usual problem). Again, make sure your menus fit in the reasonable desktop size.
Enterprise is intended for sites with long submenus. For sites where you must be sure that menu stays visible. It includes additional scripting which checks for menu position and moves it in the opposite direction if it’s off-screen. It’s clearly the best choice for commercial sites, unless you are sure that your menus will always fit in the visible part. If you are, then you are better off with one of two lighter versions, as you will have smaller download foot-print.
Switching between versions is easy, as CSS and HTML markup are same for all of them. What changes is the accompanying scripts and the code you use to include the files. Instructions for all of this can be found on the Intro page.
Accessibility issues
These menus are always branded as utterly non-accessible. True, they depend on the precise movement of your mouse, thus making it inaccessible for people with disabilities, as they will have a hard time fetching items in the second or third nested submenu.
However, this is not the problem with the menu itself. It’s with the site IA designer.
Online shop is the typical example. You start with merchandise types (books, games, music etc.). Then when you click on “books” you could have Latest, Most popular, A-Z, Recommended, etc. You need to build such site to be usable with simple links – no menus or search. Only then you can think about drop menus.
So, each item that has submenu must itself be linked to a page that contains “normal” list of items from that submenu. By doing this, you solve not only mentioned accessibility issues but are also supporting older browsers. The way CSS is included (@import) prevents very old browsers like Navigator 4 or IE4 to even see the styled menu.
On the other hand, browsers like IE5/Mac or Opera 6 have decent CSS1 support, thus being able to see and load menu .css files. Due to use of CSS2 advanced selectors, they will never show the submenus, thus creating usability problems if you do not link the main items to appropriate pages.
Always think deep about your site IA. Using ADxMenu as the only source of site nav will only get you in trouble. Use it to speed navigation up. That is its purpose. That is where it shines.
By the way, I’m (or rather We are, being MS Partners) currently raising the IE6 incompatibility with Microsoft (Yes your menus are that good). Anyway, will let you know if we learn anything from them. Hopefully we’ll get to speak to IE developers, or people nearby.
Thanks Andrew — anything that could possibly stir MS out of its sleep is good. Gates announced IE 7 beta to appear this summer, but I don’t hold my breath it would contain spectacular changes.
Would love to be proved wrong though.
Aleksandar,
Really like your menu. I’m trying to use two instances of it on the same page, but I’m running into trouble. I see in your Porsche example that this is possible. Did you have to tweak the JS file to get this to work?
I have create seperate CSS files for each instance, and I have renamed the surrounding
However, no luck. Which is why I’m guessing I need to make a change to the JS?
Anyhelp is greatly appreciated.
Do you have an URL I can look at?
I assume that the problem is with IE, as Firefox and others should work with just CSS.
Yes, IE is the culprit. Here is the URL.
Thanks again for your help.
I think it’s because you have div with id=“Menu”, but then have main ul with id=“menuList”.
If you rename both to use either “menu” or “Menu” (but both should have the same case), it should work.
Hi Aleksandar,
To get back to the problem mentioned before, I now have a url that demonstrates the problem with the Enterprise version.
steps to reproduce:
– use IE6
– go to http://www.vitsoltest.nl/
– while the page loads, hover your mouse over the ‘products & sales’ bar in the top
– after loading, move a little over the menuitems.
Sometimes it works, sometimes it doesn’t.
weird isn’t it?
I’m still having trouble with this. I changed the two references to use the same case. menu, menuList; menuet, menuetList.
I also noticed that your Porsche example doesn’t have the JS include, so I took that out and I also tried your htc file (from the Porsche example)… but still no luck.
I’m beginning to wonder if this is because my menu is vertical?
Once again, here is the URL with the updated files.
Thanks!
Heh, this is a nice one — another tidbit to add to Instructions page.
Problem is with actual names. Word “menu” is a subset of the word “menuet”. Thus, when .htc is doing its work, it will find “menu” inside of the “menuet”, and will never actually process menuet (it will treat it as menu). That is why first menu works in IE, while second does not.
I did not played much with this, but search and replace “menuet” with “etmen” and it all works.
I think that it would work even with these names, if “menuet” was before the “menu” in the html source.
I’ll try to find a way to prevent this problem in the future.
Hello,
I was wondering if it is possible to put the menu within an external .js file. I have tried doing this using
document.write(”; etc
but I cannot get the menu to appear. Maybe some special coding is required?
Any suggestions?
regards,
James Emmerson
Bingo. That crossed my mind, and I actually thought I tried that fix… but I guess not.
Thanks v much!
Hello. great job with those menu. i wanted to ask a q. let’s say i have 51 in second level of menu. it align to the bottom of the page and rest just “fly” to the top. visible only last 15–18 . all the other out of the page. is there way to break that long menu on 2 columns? or add scrolling to it? (like in windows start menu?)
We finally heard back from Microsoft about the memory leak issue (from a few weeks ago). Basically they advise against the use of nested functions and say their behaviour is “…is in fact by design and not something that the IE team are likely to change.”
You might find that pretty strange — well we don’t have the time to pursue the issue with them. They recommend this link:
http://blogs.gotdotnet.com/ericli/PermaLink.aspx/f249659d-a3f1-4f6b-9ca3-3bbcc2df240e
What eventually solved the problem for us was to use Mark Wubben’s EventCache:
http://novemberborn.net/javascript/event-cache
This allows us to continue using the ADxMenu for IE.
Heh, you beat me to the punch. I saw the link about EventCache and are planning on checking out the opportunities for the integration. I will check the Closures text to see what I can do with it inside of .htc.
In any case, I’m glad you solved your problem. Thanks for the time and effort in bringing this to an end.
James, I never thought of putting it in external .js file — that would deny the main virtue of the menu — it is always in the HTML, ready to be indexed by search bots, ready to be used by any device and browsers. Javascript dependence would basically deny that.
Can’t really tell why would
document.writeof entire UL tree fail…If you output the exact same HTML, it should work. Then again, who can tell what browsers can surprise us with.Dov, 51 items? There must be a way to regroup them in smaller sets and make one more level. I have experimented with scrollability one year ago with version 1, but it failed miserably or required a lot of Javascript code for something that is basically IA problem. I simply decided it was not worth it.
I have two problems with my menu.
1. The menu disappears behind one of my layers (position: absolute) in IE, not FF
2. The “menu cells” are seperated by in IE, not in FF here either.
Does anyone have a solution?
http://anders.jungfrubo.se
Anders, 1st problem is because of IE’s buggy z-index support. Check this tutorial of mine about z-index.
Second problem (just guessing — I can’t access your site because of too many MySQL connections) could be because of another IE bug — it will add such space because of white space between list items in HTML code.
float:left/rightshould fix that.Just currently working on implementing 2 x horizontal menus.
The ADxMenu is awesome. I am, however, have a few issues with the over lap still and although reading through the z-index tutorial…im still not sure what I would need to do to fix this.
Current Development Site: http://dev20.1emotion.com
As you can see in IE the top menu overlaps the bottom menu (other browsers appear to function fine).
Any ideas?
Thanks :D
Hi Aleksandar,
Sorry, a while I did not visit here, can you let me know if question (#22) is resolved, or not ?
Has the Mozilla bug been corrected? Is there a CSS hack?
“Submenu disappears when mouse hovers objects and overflow:auto elements, in Firefox
This is a known bug in Firefox which will hopefully be corrected in future versions.”
Nope. Presumably it will be in 1.5 (formerly known as 1.1).
I have the menu working perfectly after following your examples. However, now I am trying to remotely load the menu using JavaScript from another server, e.g.
The menu will work in Mozilla if remotely called as described above, but won’t in IE6 since it can’t load the local files.
It would seem possible to use javascript to detect each browser, and print the code needed for that browser.
I am just not sure which css code is needed for each browser without the extensive testing (which I believe you have already done).
My goal is to put all the menu code in one file, so it can be loaded remotely via javascript.
Any suggestions?
The javscript tags I posted above were removed after posting.
My example was:
javascript src=http://… I think you get the idea.
I have narrowed down the problem to loading the ADxMenu.htc file. It seems this file can only be loaded locally.
Is there another way to call or load the ADxMenu.htc code besides using the “behavior:url” syntax?
Brian, I have never tried anything remotely similar to what you are trying to do, hence I can’t really help. The CSS itself is clearly divided. Menu.css for all, Menu4IE.css only for IE, on top of previous one. As for behavior, see MSDN — I did not read more than I needed.
Thanks for getting back to me. Yes, it’s the behavior reference problem which calls the ADxMenu.htc file. I wonder if a “body onload” javascript option would work? Any thoughts?
I think I am out of luck. According to this page:
http://msdn.microsoft.com/workshop/author/behaviors/overview/elementb_ovw.asp#Download_Permissions
It states:
“The content in an HTC is considered to be a part of the primary document, so HTC files are downloaded automatically to the browser; they do not require any user permission prior to downloading. One requirement for an HTC file is that it must be downloaded from a URL within the same domain as the primary document, otherwise an access denied error results. For more information on component download issues, see the HTC Reference and Introduction to DHTML Behaviors articles.”
Brian, can’t you load behavior from the active site and load the content from another (I assume you achieved second)? The behavior should not mind from where the content came, as long as it is present in the page when it starts processing.
Just a thought…
Hi, I just wanted to say how much your menu has helped with the development of a site for a local club :) It took a little while for me to grasp how everything worked and I haven’t changed all that much, but hopefully others can see another example of how it can be used. The examples are extremely helpful as well as I was able to use those as the first building block. Thanks for your brilliant work! I will continue to use this menu for my other sites and hope to customise it to another level :D
Is there a known problem using the menu on IE6 SP1? I have a user reporting a javascript error (most likely from the behavior reference).
The behavior path is a web accessibile directory.
body { behavior:url(“/styles/ADxMenu.htc”); }
Works OK when I tested in IE6 SP2, with “show script notification errors” enabled.
Not that I know. Sounds like bad IE cache — clearing cache and reload should fix it.
Why would clearing the IE cache fix a script error message?
When IE’s cache is full, it will sometimes try to execute outdated or damaged .js file, which lead to reporting non-existing errors (if they are really non-existing).
I’ve seen this many times, especially if you use HTTP compression for .js files. Ctrl + F5 on problematic page (forced page refresh) usually resolves the problem. If cache is on the limit, only cache clear will help.
First…GREAT Menu!!! A lot of searching was done on my part and I have had the best luck with your solution. I hope to contribute a little back.
Here’s my issue. Transparency, I would like to have the menu displayed with a transparent background. Look at the following url in both IE and Mozilla. I have only included the necessary css for mozilla and IE at this point so if you’re comparing please use those browsers.
http://home.comcast.net/~joel.e.gardner/
The issue is IE (big surprize!) won’t show the transparency for submenus. In the above example I have put the formating in the submenu If I put the transparency at the submenu level all subsequent sub menus disapear!!! Well not really they just don’t pop up they are there but you can only see them if they are positioned above the parent submenu. Look here in IE…
http://home.comcast.net/~joel.e.gardner/index2.html
Any help would be greatly appreciated.
Oh also found that there is a bug to the above issue but none of these fixes seemed to work.
http://www.positioniseverything.net/explorer/ie-listbug.html
Joel, few things. Filter is problematic in IE because it disables the menu functioning (as you noticed). It’s IE problem which I experienced with first ADxMenu — you can only use it for the most nested submenu (last level). There is no solution for this problem.
That said, filter should work, but I think you have used invalid syntax — check MSDN for the right one.
I have not exprienced the list bug, at least I don’t remember. :)
Thanks for your quick response. I worked at it a little longer and came up with the following solution.
Added an img and sized it appropriately to the submenu UL with the correct filter syntax. I also had to add the z-index to make sure my menu arrow selector was on top. Shazam it works. Not a ver sexy solution as now I have to manage the look in two places. Notice that my last level sub menu is still managed with the CSS and the filter is applied correctly. Works in both Mozilla and IE but Mozilla renders the image size slightly different.
Here is the page: http://home.comcast.net/~joel.e.gardner/index3.html
Again, thanks for your quick response and I hope this helps anyone else that is looking for a similar solution with multiple sub menus.
First of all, great work here…
We’ve been using this this menu for a while and we only had a niggle with IE5 which we think is negligible. However we have now tested on IE7 and notice that our menu and none of your examples work.
I noticed that you have based your code on on PSEUDOS V1.20.040828 (http://www.xs4all.nl/~peterned/csshover.html) which has been upgraded to Version 2.01.050927 since :hover will work natively on IE7.
Has anyone else got it working on IE7??
Diego, I expect menu to work without the hitch in IE7 final. The problem you are seeing here is apparent bug in IE7 beta 2 preview (can you believe this name?) where :hover does not work if CSS is included using @import (as I do). If you use regular link tag, then it works, according to various articles on css-dicuss list or some web sites.
This looks simple enough to be fixed by next IE7 release (probably RC1).
I’m keeping my eye on the development on IE7 and will re-check all my important work in it, once it stable. For ADxMenu though, I expect it to work without problems.
Hi,
Great menu system. I can get the menu to work in IE and firefox no problem when all the HTML markup is one page. I would like to use a PHP include to bring in my navigation system. When a link is added or removed I want to be able to edit all pages vs manually updating over 50+ pages. The works fine with Firefox but IE seems to want to kill me.
It’s weird thought the test page works if I manually kit enter in the Address bar more then once but if I hit refresh on just go to the site for the first time my nav System is not there it just a big empty DIV bigger then it should be.
Any suggestions.
The test page is at http://www.crazedproductions.ca/BeadCafe/
Thank in advanced,
great menu system. Is there any reason why is would not work in a PHP include? If there is a reason is there a fix for it?
Brandon, on all my sites I keep the menu definition as include, so it definitelly works. As long as final page (that calls all includes) has all the needed elements, it will work.
bpal, I checked the test page and could not see anything wrong, in both IE and FF.
Thanks for the great menu. One thing I found on IE7 Beta 2 was that it wasn’t calling the htc file.
There is a simple fix: I changed the header code from:
(less than or equal to IE6)
to
(greater than or equal to IE5.5)
and it works fine.
question about the menu hover:li
Can you apply filter:“alpha(opacity=50)”; –moz-opacity:0.5; to it?
i tried but the ul menu items do not show up.
if i apply it to li a:hover it works but goes away when you hover over the ul menu items.
Any suggestions?
Thanks for all the help!
Aaron
Niki, .htc file is not needed for IE7. Latest beta fixed all the issues.
Aaron,
-moz-opacityshould work, butfilterbreaks the menu functionality. There is not workaround for that IE behavior — it is by design.