Recently I posted an article which talked about the reasons to avoid using javascript navigation. The article listed reasons, but not alternatives, so that’s what I’d like to spend some time talking about.
Secondary Navigation
I feel that the best alternative to javascript navigation is to create secondary navigation for your pages. What is secondary navigation? In a nutshell, I consider secondary navigation to be any separate section of navigation that applies to a particular page or area of your site. Let’s look at some examples of this by taking a peek at the WordPress.org website. Below is a screenshot that I’ve scribbled on:
You can easily see that the secondary navigation sections change according to what page you are on. Here’s a different page:
This is a great alternative to using drop-down menus (a menu with a sub-menu on hover) because this method will work for any and all browsers.
CSS Drop-Down Menus
So what’s wrong with using CSS for drop-down menus? The answer may not be a huge surprise to you: IE doesn’t handle it well.
For most drop-down menus controlled with CSS, you essentially use a list structure with a sub-list for each menu item. The top list item is the shown menu item, and the sub-list contains the sub-menu items. You start by setting the value of the sub-list to display:none and then on hover of the main list item, you make it change the value of the secondary list to display:block. It’s a very simple concept, and theoretically this is how all menus will be done at some point in the future.
The problem is in IE6 and lower, primarily. It is possible to create this effect in IE7 (though typically you need some CSS magic specifically for IE7 to make it work), but earlier versions don’t support it properly. Why? Because IE6 and earlier had serious problems with handling actions on child-elements when triggered by a parent-element.
So, if you really want to use CSS for your menus, what’s a good way to handle this? Anything server side is ideal, but then you get into the issue of trying to detect browsers – which can work well most of the time, except that many versions of Opera cloaked itself as IE as the default setting.
Degradable JavaScript
This is a good solution, but it requires layout adjustments in some cases. You have to have the kind of layout that will work with this solution. Conversely, you can create a layout adjustment for people who have JavaScript disabled.
Let me show you an example of a decent (but not perfect) degrading JavaScript menu implemented on the US Patent and Trademark website. I have clicked on one item in the left menu bar, and you can see what happens, it dynamically opens up and shows the sub-menu:
But what if I don’t have JavaScript enabled? Here’s a screenshot of the same page with JavaScript disabled:
I think you can easily see that there are some pros and cons to this site. The good thing is that the menu is done in HTML using lists, so content is there for someone who has Javascript disabled – which is more than I can say for many sites that embed links into their Javascript. The cons? When it is disabled — the menu spans nearly twice the height of the content in the page when it’s all expanded. The visual aspect isn’t what comes to mind for me, it’s how awful it would be to listen to that many menu items on a screen reader. The idea alone is daunting.
I’m going to leave that thought to simmer in your mind, and move on to how this works (or doesn’t, as the case may be) for horizontal menus instead of vertical ones.
You saw what happened to the previous site when the JavaScript was disabled, but let’s pretend that you used a normal list structure again to create a horizontal list. Then you used Javascript to hide the sub-menus by default and to let the sub-menus drop down when you hover over the primary link. So, what happens if you have Javascript disabled? Well, in the described scenario, you’ll have all the links show at once, because the Javascript is no longer hiding the sub-menus. Depending on your layout and how these menus are styled, they’ll either push down your content to make space for all the sub-menus, or they will float on top of your content constantly.
Here’s an example of what could happen if the layers are set to float over the content, and they were no longer collapsed:
The obvious problem is not just that it looks lousy, the -real- issue is that the content is blocked.
Or if they are not set to float over the content, here’s what you could end up with:
In the second example, you’ll see a different problem – the content gets shoved down by the constantly expanded menu. Depending on how you have designed your page, moving the content like that could break your design by shifting other elements too far out of place. Aside from that, it looks bad, but not nearly so bad as the first option.
Be very careful with how you handle those horizontal menus. They can be really tricky to get right, and you have to really think ahead to make sure they degrade properly (which neither of the above examples do). Think about where those sublinks could be if you did have to show them to someone without Javascript. Could there be another area in the page where they could go? You know… like a secondary menu area.
Middle Ground Option
I commend everyone who creates their multi-level menus in CSS. As we’ve seen, those can be great and the only sticking problem is with IE 6 and lower. One middle-ground solution to that is to manage the menu controls for those affected IE versions using Javascript and browser detection as a combination. If the user doesn’t have Javascript, you have to offer a text version of the menu somewhere in your page, surrounded by a noscript element.
Best Choice Suggestion
Overall, there are lots of different ways that you can handle navigation. Some are significantly better and easier than others. Some are accessible, some aren’t.
Which brings me back to my main suggestion. If you want to ensure the biggest audience, without having to jump through hoops of ‘what-ifs’ (do they have javascript? are they on IE 6 or less? etc…) — use a secondary navigation instead. As a reminder, the secondary navigation was what I showed above in the screenshots of WordPress.org. It really makes life as a developer tons easier if you create navigation sections that are perfectly compatible in browsers and very accessible. In my opinion, the best way to do that is to make a secondary navigation section.
