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.
This is absolutely amazing. I found your website through your comments on A List Apart and I can say your website has found a happy home in my live bookmarks.
Thank you for taking the time to create these wonderful menus and if I get to use one, you can bet I’m sending you all the credit :)
Your menus are the greatest menu system I’ve ever seen and I’ve been using your previous 2.x version for about 6 months or so. They work perfectly, but now I need to move up to the new 3.0 menus. However I have an issue with these. I believe you claim your WinXP Standard version works in Win IE, but it does not work in any WinIE I’ve tried (Curently Version 6.0.2800.1106.xpsp2_gdr.040517–1325). The WinXP Professional and Enterprise versions work in Windows IE but they add class=“adxm” or class=“adxm adxmV” (in the case of the vertical menus which I’m trying to use) to the <ul id=“menuList”… I can’t find anywhere documented on your site that mentions the use of these classes in the first ul and I don’t remember ever having this part of 2.x. Has the HTML changed since 2.x? Also your example code does not have these classes but I can’t get it to work in IE without these classes. Is there anyway to not use these additional classes? I’d hate to have to go through hundreds of pages and add it in. Thanks again for your time and such a great product.
Jeremy, thanks for the kind words. You basically caught me in the middle of updating…which lasted for about 3–4 days. :S
I have updated the instructions to include that bit about adxm class. During Porsche recoding, I realized that in order to have two or more menus on the page you need to update the .htc, which was not user-friendly. Thus I added adxm to all versions, and the script will look for it and work automatically.
Hopefully, I have patched all examples properly.
Err, I just read your entire comment in the back post — it seems that the HTML code was not processed properly.
Anw, to solve your problem. I think that the simplest thing to do is case-sensitive search for complete HTML line that includes that UL and then add the class part. Just make sure the search item is unique in all documents.
The other solutions is to hack the .htc. Change the line:
var _aMenuIDs = new Array();into
var _aMenuIDs = ["menu"];or whatever you used as ID.
I hope this helps. If you still have problems, please post an example URL.
I still have problems with this kind of menus in Opera 7.54. I tried identifying as both IE and Opera, but the result is the same. A menu without drop-down background color, unable to open Hardware section in you case (second real submenu). I’ve been thinking loading a menu into my website instead of present txt links, but also avoiding js menus.
Hi Aleksandar,
The menu is flickering in IE5.5+ when using background images, and the option ‘Every visit to page’ is enabled under tools > internet options > temporary internet files, is there a solution for this?
Another issue in FireFox 1.0 is that the menu loses focus (collapses) when there is a layer with the style ‘overflow:auto’ under it.
I’m going to try to find a solution, but especially the last one is going to be difficult… Seems more like a FireFox bug
Mario, I’m hoping that 7.6 version of Opera will catch up with rest of the crowd. Until then…
Wiebe, both problems are the result of browser bugs/problems. Both known, without definitive solution. IE problem can be minimized if you apply the same background image to both
aandlielements (if you design allows that).For Firefox problem there is no known solution (at least to me).
Hello.
I was building a menu.. i must say this menu is excellent, though i experienced a problem. It is working in Firefox, but not in IE6.. This is what I currently have: http://haz.saratow.ee/ul/uploads/menu.html Maybe I messed up something or is IE messed up?(:
Hi Aleksandar,
thank you for your answer, I’ll modify my design to have the <a> use the same background as the <li>.
I’ve also brought the topic up in the Mozilla bug forum, and it should be fixed in the next FireFox release.
Here’s my thread:
http://forums.mozillazine.org/viewtopic.php?p=1070606#1070606
Thanks!
Wiebe, that’s great news — that overflow problem really got on my nerves sometimes.
Siimo, I could not respond in time to your question, and it seems that the URL you posted is not working anymore (404).
Ok, I really like what you’ve got going with your menu thing here, but I’ve got one big problem that I hope you can help me out with. See, I was looking for a menu that could be done entirly in HTML/CSS becouse the server I’m currently using only allows me to upload HTML pages and images. I’ve been able to get around this for most issue, however your menu won’t run in IE if I rename the “ADxMenu.htc” to “ADxMenu.html”. Is there any way I can just put the coding from this file right onto the HTML page or a SSI file?
I’m not sure that it is possible to code the behavior inline, inside of the page. Maybe someone else would know, but I have not seen any example of that.
Hi! I’be been searching for a solution like yours for a long time and I’m really glad that a standard compliant non-heavy-javascript version of a drop down menu exists.
I downloaded your examples and put them on my server for testing and tweaking. Everything works great in Firefox, Mozilla, Konqueror and Opera (beta) but not in IE. I’ve tried all of the examples (winXP, simple, …) and the code from /adxmenu/intro. You can check my version at <a href=“http://www.digital-concepts.com/dcweb/ADx/examples/winXP/>winXP.
Thanks for your help!
OK, one more try:
I tried the menu in http://www.aplus.co.yu/adxmenu/examples/simple/index.html
on IE5.5 Mac, and it doesn’t work… is it that partictular example? or are the menus not supported for IE for mac?
IE 5.5 Mac? You mean 5.2.3?
Mac IE does not support
li:hoverso it is not supported.Read the Intro page for the instructions and downloads.
Can I just point out that so we can validate XHTML the:
<ul id="subList"></ul>should be:
subList">I’ve tested this on IE6 and Firefox/Mozilla and it works just as good :>
This happens because for XHTML 1.1, each id tag as to be unique!
congrats for you menu! :>
Hi, this menu is amazing, thanks so much for making it available. I recently built a client site using it and tested it on my usual server. When I moved it over to the live server the .htc file doesn’t function properly. I have identical versions running on 3 servers now and it’s only on the one that it doesn’t work. Can you think of any reason that one server doesn’t process the .htc the same as the others? The reason I think that it’s the .htc file is that when I go to view the .htc file on the 2 good servers it asks me to save the file but the bad server displays a blank white page. Any ideas at all? The server guys have been looking into for 5 days but are getting nowhere.
I’ve figured out my own problem but I thought I’d post back in case anyone else ever has trouble like this. All I needed to do was add a MIME type definition to the server (in this case Apache). Add the following code to Apache’s httpd.conf file:
AddType text/x-component .htc
Or, if you don’t have access to this file, place the code in an .htaccess file in your root directory.
Hi,
Can you release the css code for :
Simple — plain and simple adxmenu …
I just think this simple one is enough
Aleksandar,
Still find problem on adxmenu that it cannot be “always on top” .…
if behind have flash object etc
More specific:
1)In IE6 WINXP SP2, no drop down menu appear when below have javascript or flash
(AddType text/x-component .htc already added to httpd.conf)
drop down is normal when no javascript or flash below.
2) In Firefox, drop down menu appear but broken when below have javascript or flash…
Please let me know how to fix ?
btfans, can you post example URLs so I can take a look?
En general, I tried to explain all the aspect of menu deployment at the Intro page, but it would maybe welcome more improvements. I assume you have read it, so please send me your thoughts on it.
Hi Aleksandar,
Yes, I have read the intro page, I like Adxmenu.. just hope some improvements.
A link that work with amended adxmenu:
http://cwchin.no-ip.com/adxmenu/menu.html
http://cwchin.no-ip.com/adxmenu/simple.html
(AddType text/x-component .htc already added to httpd.conf)
I fallback adxmenu to my homepage (and using one from Milonic) (http://cwchin.no-ip.com) as I reached above problems.
I will soon recreated the problem to a test page… inform you when it is available.
(
I recently added a comment to the Intro page regarding relative paths for .htc
It seems that IE won’t load them at all if they are inrted with relative path (like
./ADxMenu.htc). You need to either use simple path (just the name of the file — which works for you here) or the absolute path (starting with /).Oh… I will try soon.…
Just put the problem page to:
http://cwchin.no-ip.com/index2.php
The page with Milonic:
http://cwchin.no-ip.com/index.php
Please view the problems I described in IE6 WINXP SP2 and Firefox
path for .htc is
body { behavior:url(“adxmenu/ADxMenu.htc”); }
which is under /var/www/html …
another test page in
http://cwchin.no-ip.com/index3.php
with fullpath now, but seems same problem :
body { behavior:url(“http://cwchin.no-ip.com/adxmenu/ADxMenu.htc”); }
Hi,
Now the ADxMenu.htc is changed to the one with WCH handling, and index2.php and index3.php work fine in IE6 WINXP SP2.
However, it is still broken when menu is viewed under Firefox 1.0?
Any hints …?
Hi Aleksandar,
Now the broken menu is it cannot lay on top of some javascript, when view in FireFox 1.0,
Please let me know if U need more info.
Thanks Martina for the following:
Could this information please be added to the instructions? I’ve just spent hours checking my HTML code. Feel free to view my church’s website where I’m about to launch this wonderful menu in to action.
Just to add to my previous post: the AddType fix worked, briefly, but now Internet Explorer refuses to display the drop-down menus once more.
In Firefox there are no problems. Could someone please give me some pointers? Thanks.
To longwayround,
From Aleksandar above:
Make sure its path is valid and the capital letters else the file is not found causing yr problem…
Aleksandar,
After the my Firefox issue soloved, can I ask if you can link my page as a demo site… ?
Please let me know the details.
I shall be writing a post in my
blog for yr great ADXMenu
soon…
The path I’m currently using is:
@import “/CSS/Menu4IE.css”;
body { behavior:url(“/js/ADxMenu.htc”); }
I’m inclined to believe that the problem could well be with my version of IE, since the menu worked fine once. A couple of minutes later, with no changes to the site, it stopped working. Oddly, the examples on this site work consistently.
longway — I can’t see what is causing IE problem. Can you create stripped-down page, with just the menu, without the extra .css?
btfans, to solve your flash problems, add wmode=“transparent” parameter to your flash code — it should allow the menu to go over.
(I can’t access your site now to check for it).
sorry, please retry.
(as I close my server for some hours daily)
The problem is not over flash, but
cannot over java .class applet
in Firefox only.
The stripped down version is online now at http://www.fulwood.org.uk/layout2.html.
Your assistance is much appreciated.
Dear Aleksandar,
Thanks for the hard work you are putting into the development of this awesome free menu. I have been using the previous versions of your menu for a while (please feel free to check the menus at http://www.activeidealab.com).
I am now wondering (and I am sure a lot of people are as well) whether the improvements made in version 3.0 justify a migration from the version I am currently using (version 2b without the csshover.htc) to this latest version. I am not worried about the amount of work involved (which is not much), I am worried about breaking something that is already working.
Is there a list of solved bugs for this latest release? What are the major advantages of this version compared to the previous one?
Once again, thanks for your work!
I’ve just managed to check the stripped down version of my page in MSIE (I can only do this at work). It now works. Clearly, it’s the rest of my CSS causing the problems so I do apologise for wasting people’s time.
Thanks for the menu, it really is rather good.
Norbert, good question, I never thought of explaining the benefits. :S
Let me start with negative side — as you can see from the discussion here, you might end up with .htc MIME type troubles. Also, who knows what else could prevent .htc files to load — some sort of paranoid firewall settings, high-security in IE etc.
I will update the Intro page with all this tidbits, as soon I manage to find time (15h working days are killing me).
Benefits are numerous though. For me, the most important one is number of HTTP requests. Now, each browser load only those files it needs. In the case of standard menu version, FF, Opera and the rest load only one .css file (IE loads three). If I need WCH too, I just change the file, number of requests is the same. If I need enterprise, IE still stays on three requests (it does not see the ADxMenu.js) while other browsers load just one more file.
One benefit, that concerns only me, is that I have much easier maintenance of all the files. The lack of 3b version is te consequence of the fact that ADxMenu.htc does not stall IE on page loading.
The CSS is also a bit cleaner and IE hacks are clearly separated. Having separate IE .css file is a great thing — every web design I do now has them separated. It is much easier to make my design as it should work, and then fire up ie.css and do whatever is needed, with no worries that it would break something in FF (where everything is done and tested by that time).
Lastly, one huge problem solved is the way multiple-level menus work in IE — current menu is not covered with other menu level or items.
In the end, for your particular menu, I don’t see much reasons to upgrade though, apart from HTTP requests benefit. Thanks for nudging me to write all this. :)
btfans, I can’t help you with Java applets problem. It seems to me that it is the same sort of problem as with iframes or overflow:auto elements, but I could be wrong.
It is out of my reach for now.
Hello Aleksandar,
Sorry as I am CSS novice, can you dig me a little bit more what aspect I should look for in order to solve this problem ?
You know Firefox is still a good browser (Once before I want to drop IE), so I just really want this problem resolve (it only work on IE) !!
Aleksandar,
Thanks for your reply regarding the benefits of version 3 vs version 2. The menu in my page is quite shallow right now (I haven’t added any submenus yet), so it might look as though I don’t need to upgrage to the latest version (or even use the ADxMenu at all). However, when I increase the number of submenus, I will definitely need the functionality of the ADxMenu. I believe that being able to have cleaner CSS files is an advantage that, on its own, justifies the upgrade. Once again, thanks for your reply and the work you are putting into the ADxMenu!
Hi,
trying to merely recreate your enterprise XP version at the moment to confirm i can get it working in all browsers before starting to develop a skin for it. Wondered if anyone had the opposite problem to most here in that it works fine in IE but not at all in Firefox.
page here
I’ve copied file name, content and structure as close as i could but to no avial…
any help appreciated!
David
David, I assume you saved the page from IE. If you look at the Menu.css it saved, you can see
UNKNOWNselectors, which is what IE is using when it finds selectors it does not understand.In this case, it is
#menu li>ul.My recommendation is to develop stuff with Firefox, not IE. Then you can use Web Developer extension (current version is 0.93), which allows you real-time tweaking of css files on foreign sites and many other things.
As the starting point for new designs, I recommend stripped-down CSS files on the ADxMenu Intro page, under instructions.
Hi Aleksandar,
I’ve been using your fantastic menu system (Standard version) for a while now with no trouble, but have come across a memory leak with Win 2K/IE6 which is causing a bit of a problem.
The menus are used on a web page which refreshes every 15 seconds with new data. The IE window is never closed (or ideally will never be), as it’s monitored 24/7. Basically, memory usage increases significantly with each refresh, by as much as 2 MB/minute, and this causes performance problems before too long.
I think it’s caused by the installation of the event handlers in the “ADxMenu.htc” file — hard to tell if they’re actually being removed when the page unloads. The more menus, the bigger the link (I think), and if I remove the HTC entirely, there’s no leak.
Here’s a site that demonstrates the issue: http://69.90.69.235/menu_test
I’ve edited “Menu.css”, but that’s it.
Any ideas?
Thanks!
Interesting problem Andrew.
I did a bit of research, and it seems that there is a known problem with HTC and memory leaks. This does not sound like the case we have here — I tried the proposed solution anyway, but on IE6 in Win2k3 there is no such registry key. Adding new one had no effect.
I found another article where it is explained that memory leaks are somewhat inherent to the way Javascript works.
If I read all linked pages correctly, the problem is that event handlers, added in
_HoverElement()function are not freed when page unloads.I tried to write the code that would detach event handlers on page unload, but that did not have any effect — memory allocation kept going up. Either this is impossible or my code was wrong (which is far from impossible).
I noticed a problem with the Enterprise version HTC. Sometimes a JavaScript error occurs when loading on line 186, with the error ‘property id is null or not an object’. Anyway, I think it has something to do with the page loading while the mouse is over a top-level menu item. I don’t know if you heard of this. I can’t post a sample right now, but will do so in the coming weeks. I’ll get back to you…
Andrew: You can use FireFox ;-)?
Well, it does work fine in Mozilla/Firefox but the product we hope to use the menus in is deployed in a corporate environment and we can’t persuade all the users to drop IE — unfortunately!