Article
Creating expandable menus using CSS and Javascript
At some point in every web development project, “the client” will ask me about using fly-out menus. Happens every time. Unlike other bad ideas (e.g. links pages), I have a hard time explaining fly-out menus away.
Yet they are almost never a good solution, due to three major usability problems:
- When they “fly out” (or drop down, or whatever), they cover part of your page.
- They require a great deal of mouse control to work. This is often challenging for anyone over 30 (honestly).
- They’re startling. A rollover that changes color is good feedback, but menus that appear when you hover are disorienting. It also goes against our expectations for on-screen interfaces. We expect things to change when we click them, not otherwise.
But these are subtle points, easily lost on people who see fly-outs as an easy solution to a complex problem. What to do?
People have developed hybrid navigation that bridges the gap between simple navigation lists (for digging) and sprawling, fly-out menus (for browsing). The most common variety expands part of the menu depending on where you are in the site. Nick does this very nicely on blogosphere.us.
But this doesn’t offer the main advantage of fly-out menus: seeing all your choices in one place.
Another variation offers expandable menus that, once clicked, show a series of sub-options. Jon Hicks has the only example I can think of, and he does an excellent job. Unfortunately, his setup requires you to click once before seeing anything. And it misses expectations by a little. Clicking “journal” should take you to his journal — instead a sub-menu appears. The change is so subtle that some people might miss it.
So I have developed yet another hybrid, this time between Nick’s and Hicks’. They are called exandable menus, and yes I am taking suggestions for new names.
At first glance, this is a simple navigation list. Want to learn about vegetables? Click “vegetables.” Or, click “toggle” to expand the list and see exactly which vegetables I will be discussing. (The word “toggle” is a little busy, but it could be replaced with an arrow or something.)
This solution has a few key advantages:
- It accommodates multiple skill levels. Beginning users may be content to click the main categories, while advanced or returning users will use the toggle.
- Users can compare lists. One of the major complaints with fly-outs is that you can only see one at a time. It is impossible to compare between them.
- It uses space wisely. Expanding a menu doesn’t cover other content, and the default (collapsed) view takes up very little real estate.
Finally, the code is simple, standards-compliant and degrades nicely in older browsers or browsers without javascript. In the markup, it’s just an unordered list that works everywhere, and javascript is not necessary to use the navigation. Clicking the main categories (fruits, vegetables, etc) works just fine.
My demo is very primitive, with lots of room for enhancements and refinements (I have ideas already). If you are using this technique somewhere, I’d love to see it! If not, feel free to grab my code and give it a try…