Drop-Down Navigation Script

This script makes a navigation drop-down menu function. I created it for the front-end of the elligence help file, ellipedia.

Note: for the sake of clarity, the style choices on the nav menu are intentionally ridiculous. See ellipedia for a real-life example.

How It Works

There are two "Request" variables, ExpandRequest and CloseRequest. Another variable, ExpandedNode, stores the ID of the currently expanded element.

When the user activates a LI element by either hovering the mouse over it or tabbing to a link, it fires the navOnMouseOver function. This function adds sets the ExpandRequest variable to the ID of the activated LI. Then, optionally delayed by a set number of milliseconds, it calls NavUpdate.

NavUpdate looks at the current values of CloseRequest and ExpandRequest and determines which action is most appropriate.

CloseRequestExpandRequestAction
foobar Close the LI with the ID of foo, and open the LI with the id of bar.
foofoo The user moused out and then back on. Do nothing.
foo[blank] Close the LI with the ID of foo.
[blank]foo Open the LI with the ID of foo.

CSS is the King

In the context of this script, "open" and "expand" mean to add a class of expand (configurable) to the element. "Close" and "collapse" mean simply to remove the expand class. While the behavior is driven by script, the meaning and effect of each action is determined by CSS.

I believe that this approach results in the simplest and most readible script possible.

So what?

There are a million and one drop-down navigation scripts out there. What makes this one different?

  1. Extremely simple HTML markup.

    The menu is simply a series of nested UL and LI elements with an ID. Modification is very simple, and in the event that a user doesn't support CSS or JavaScript, the navigation is still accessible.

  2. Resilient Coding

    The code is designed to fail gracefully and trap any possible error.

  3. Keyboard Accessible

    Because onfocus events are handled, a user can tab through the links.

While it's possible that there are many ways to do this, I was not able to find any pre-packaged scripts online that met our requirements in a satisfactory manner.

Aren't Suckerfish Cooler?

Cooler, perhaps. Better? No.

Pure CSS expanding menus are not nearly "forgiving" enough to be of any real value. If a user does not have remarkable mouse dexterity, then it's simply too easy to accidentally close a menu as they move to click on something. This is a violation of user expectations, and badly breaks the experience flow.

These experiments in CSS-driven behavior are interesting and have uncovered cool some new ideas. But, at least with the current state of CSS, behavior is best managed through script.

Isaac Z. Schlueter, 2005-10-27