by Kyle Weems 25.August 2008 08:12
When it comes to discussing web-related topics on the Internet, your average person that makes websites frequently comes across as something of a drunk rugby player in a china shop with a disagreement with the shopkeeper. Conversation gets very heated very quickly, and there's usually collateral damage.
I attribute this to a combination of passion on the subject and the relative safety provided by conversing with someone hundreds of miles away by text. Carolyn Woods goes over this tendancy to bad behavior (and solutions to stop it) in her A List Apart article Putting Our Hot Heads Together. But I'm not here to discuss bad behavior.
However, I am going to discuss of the many topics that seems to attract so much vitriol: dropdown menus (or mouseover menus, or whatever you'd like to call them).
There's a lot of problems with this navigation technique. The first major issue is that they're not terribly effective at what they're supposed to do (namely, helping someone navigate a site). Don't believe me? Then perhaps some experts on the subject can dissuade you (like Jeffrey Zeldman, Jakob Nielsen, and the very guru of UI's, Jared Spool). I'll let the experts speak for themselves, but the heart of the matter is that dropdowns work against the way people naturally try to interact with the data presented on a page, and prove to be an obstacle to navigation, not an aid.
However, as I've noted, dissent is practically a hobby for website creators, so these little gems of the web keep showing up. Worse yet, non-experts who want a website are frequently very adamant about what they want on their websites, research be damned, so at various points in their careers virtually every web developer is going to have to make a dropdown menu or two (or ten, or a thousand. They breed like rabbits.)
So when the time comes to make one, you might as well make one correctly. This would seem an easy proposition, especially for people with even a bit of CSS under their belts, but the reality (as always) is never the same when it comes to developing for the web.
In a perfect world, we could use simple, clean HTML and CSS to make a dropdown menu. We don't exist in such a place, but for argument's sake, take a look at Example #1 to see how something like this would work. We've got a series of unordered lists to hold our menu. The highest level list is the main menu, and always visible. The secondary lists are the sub-menus, which we hide with ul#ulMenu ul {display: none;}
To make the submenus appear on a mouseover is a surprisingly simple, taking advantage of the :hover pseudoclass. ul#ulMenu li:hover ul{ display: block;} causes the selected submenu to appear when you hover over it's parent list item (animal, vegetable, or mineral in my example). It's as easy as that.
Well, in a perfect world.
Unfortunately, we live on a blighted sphere that is frequently troubled by a writhing, unholy, juggernaut of flawed design; a black beast that lives well past its natural lifespan by burrowing through the Earth to collect the souls of the unenlightened.
I speak, of course, of Internet Explorer 6, which was not only horribly flawed in its standards implementation on the day it was first released, it has managed to persist into the modern era where its standards implementation is positively anachronistic and deeply problematic. Why is it still being used? Mostly we can blame corporations and schools afraid of the cost and risk of upgrading their software. But rather than continuing to pontificate on my soapbox, let me just get to the point: approximately 25% of Internet users are still making use of IE6.
This means that in most cases we as website creators need to ensure that our contstructs can operate in the twisted rendering engine that is the black soul crouching at the heart of IE6. Unfortunately for our little dropdown menu, IE6 does NOT support the :hover pseudoclass on any element other than anchors. Which means that 25% of your users can't see your submenus if you're using the example above.
This is unacceptable in professional development.
So what now? Well, we could form some sort of web creator suicide pact and just depart this cruel world while stepping off an appropriately tall tourist destination. But rather than follow down that grim path, I'm going to suggest that we get creative.
Or borrow from people that have. Dropdown menus have been around for more than a little while, and so several clever people have come up with various solutions to the IE6 problem while only making use of valid HTML and CSS.
And more specifically, Internet Explorer's conditional comments.
In particular, I want to thank Stu Nicholls, who by all accounts pioneered the technique, and the fellow(s) at GRC that smoothed out the conditional comments a bit more with their navigation menus. The following example borrows heavily from their ideas and examples.
With credit given, let's take a look at Example #2. It still uses all the same techniques for compliant (or in IE7's case, mostly compliant) browsers. However, we've added a good deal of extra html behind conditional comments.
What are conditional comments, you ask? I've actually discussed this delicious topic before in my cleverely titled post Say Goodbye to the Stars. Go take a gander if you're not familiar with the topic. Once you are, let's continue.
The main obstacle with IE6 and the first example was the :hover pseudoclass only working on anchors. The solution is using conditional comments to create a tiny table inside an anchor tag for each submenu (by using conditional comments we preserve the validity of our markup for the major browsers). We need the table for IE6 so we can have the submenus appear when we hover on the main lists anchor tags.
Say what?
That's correct, since anchor hover styles work in IE6, we're shoving our submenus inside the anchor tags for that browser only, then using IE6-specific CSS to make those menus appear on a a:hover ul{display: block;} rather than the li-oriented style we used for our first example. However, due to various browser quirks, we need to put those submenus inside tiny tables so they actually display (without which, the ul's won't show).
There's some major advantages to this technique, chiefly that it requires only valid HTML (technically) and CSS to work on all browsers. The problem is that to make it valid and still work on IE6, we're using a whole lot of conditional comments, which really should be used sparingly. This is a great technique for a site that we need to ensure the menu works even if the users don't have Javascript enabled.
Although the solution is effective, it's not very elegant. However, we've got a third option: Using CSS & Javascript.
Some designers are quite opposed to making use of Javascript for page elements like navigation, due to the fear that it will make the page unusuable by users with their Javascript turned off. To this I've got two responses: 1. your dropdown menu shouldn't be your only navigation technique (see beginning of post) and 2. Javascript market penetration is pretty much universal at this point in time.
As I've mentioned many times before, a good man by the name of Dean Edwards has used Javascript to create a 'patch' that can fix many of the standards compliance issue that IE6 has. This script (called IE7 confusingly enough), is relatively small-impact on a page's load time, and among other things fixes the :hover pseudoclass limitation. So, by including it on your site with your menu from the first example, you get a site that is (1) valid, (2) clean, and (3) runs on every browser including IE6.
Example #3 shows this in action.
So, which technique should you use? Until IE6 has shrunk to the point of obscurity, you should probably avoid #1 on any site expecting normal traffic. Whether to use #2 or #3 depends a lot on your preference and your client's needs. I think that #3 is the cleaner solution, and many modern sites rely on Javascript to make the site render properly in IE6 these days anyhow, so you're usually fixing more than one problem with this technique. However, #2 is guaranteed to work on pretty much any browser regardless of whether they've disabled Javascript or not, and is completely valid (if only technically so).
However, I say use none of them. Beg and plead your clients to use a more reliable navigation technique. That said, since we've proven we're not in a perfect world, use the solution that best meets your needs and your client's demands.