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.

CloseRequest

ExpandRequest

Action

foo

bar

Close the LI with the ID of foo, and open the LI with the id of bar.

foo

foo

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?

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.

Resilient Coding

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

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.

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.