ADxMenu accessibility update for IE6
Aaron J. Young from OUHSC recently wrote with question:
I was wondering how one might be able to modify your ADxMenu so that if someone has IE6 and Javascript disabled it would simply show the entire tree menu.
I prefer to add actual links to main menu items and have sub navigation shown on each of those pages. However, this is reasonable request that improves the accessibility of the menu, thus I looked into possible solution. I wanted to avoid changing HTML for the menu and I think I came up with good solution – keeping in mind that this will be seen and executed only by IE6.
The main four menu examples are updated, as well as downloadable archive. There’s also one new example that shows how you can create two different styles, one when Javascript is enabled and one when it’s disabled.
How it works
Part of the CSS that initially hides submenus is this:
.menu ul {
visibility: hidden;
position: absolute;
}
Thus, for IE6, that had to be removed and activated only if Javascript works. Which means that now, inside the conditional comments I have this:
.menu ul {
visibility: visible;
position: static;
}
and the new version of the ADxMenu.js contains this bit (it’s all one line, broken here to be more understandable):
document.write('<style type="text/css" media="all">' +
'.menu ul {visibility:hidden; position:absolute;}' +
'</style>');
I avoid document.write in my code as much as possible – the correct place to do this would be in the Setup method, for each menu found on the page. However, that means that menu will be visible even with Javascript ON, for that brief moment or two until script kicks in. Since this is custom made only for IE6, shown code line is better solution.
A step further: different styles
I have a hard time visualizing menu that would look acceptable with Javascript on/off and to use the same styles. Even with simple and short menus, I don’t think it would look fine in most cases.
Given that, the script now has this line:
aTmp[i].className = aTmp[i].className.replace("adxie", "");
where aTmp is an array of menu elements that have the adxm class. This requires you to add one more class to the main list, like this:
<ul class="adxm menu adxie">
Using this class, you can then create IE6-only styles for the case when Javascript is OFF and leave the usual menu styles for the case when Javascript is ON. For this to work, make sure you write the JS-ON styles first, then the JS-OFF below them. The new example shows just that.
If changing the menu HTML is not an option – like too many existing pages to be updated in reasonable time – then you can do the reverse thing. Comment-out the previous line in the script and uncomment this one:
aTmp[i].className += " adxie";
Thus, you can use your existing menu class to style the JS-OFF solution and adxie to style the drop-down case (JS-ON). First solution is noticeably easier to do and maintain, so go with it if possible.
I took this opportunity to rewrite the script a bit, nothing really important. There you go, 1st update of the menu since January last year. :)