Line by Line

Gadgets: Popup Navigation

Once upon a time, sites used <select> dropdown boxes as navigational elements in order to save space. They might have been little forms with "Go!" buttons, or worse, they might have used JavaScript to change the page as soon as the user made a selection. Worst of all, some of these little devices are still around! This is a bad thing.

Fortunately, there is an alternative. JavaScript and CSS allow designers to create popup menus that appear when the user hovers over links, and disappear when they're done. This is a good thing.

Demo

Roll your mouse over any of these menu items and a popup will appear with another list of links. In this case, all the links are duds, because it's just a demo after all. In the real world, of course, the top-level links would point to main sections and the links in the pop-up would point to subsections or pages within each section.

How it Works

HTML Elements

This version uses a bunch of nested <div>s. First of all, the navigation bar is enclose in a div with the id "navbar" specified. Each top-level link is contained in its own div, with onMouseOver and onMouseOut attributes set. (I'll get to those in a bit.) Inside those divs, I put a top-level link, followed by another div--with an id attrubute reflecting the link text. That div contains an unordered list, which contains links.

To be honest, it probably would have worked just as well to skip this innermost div and assign the id to the list itself, but I guess the div would come in handy if you wanted something else to appear in the popup.

The div wrapped around each link, however, are of the utmost importance. See, it's the div, rather than the link itself, that triggers the onMouseOver and onMouseOut events. The divs (or lists or whatever) for each popup are contained inside the wrapper divs. This way, the onMouseOut event doesn't trigger when you move the mouse off the link and onto the popup.

Scripting

The script is a little clumsy; I wrote it a while back and haven't refined it much yet. It uses two arrays to keep track of whether a popup should appear. One lists the ids of the popup divs, the other is a list of boolean variables that keeps track of whether the corresponding popup is supposed to be displayed at the moment.

The onMouseOver event for each popup sets the appropriate variable to true, then sets a timer that calls a function. If the variable is still true when the function is called, it displays the popup by changing (appropriately) the popup's CSS display value. This way the popup only appears when the mouse pointer rests on a link; If the mouse just happens to pass over the link, the popup won't appear because onMouseOut sets the variable to false.

Making the popup disappear works the same way. The function checks that the variable is still false after the timer, so that the popup doesn't disappear if the user accidentally points outside the popup.

Style

The important parts of the CSS are the positioning of the popups and the display attribute that makes the popups appear and disappear.

First of all, any div that's a child of #navbar (remember, that would make it a wrapper div) gets position: relative;. This allows us to use position:absolute; on the popups (i.e. the divs nested within the wrappers) and make them appear relative to the wrappers rather the <body>.

After that, it's a simple matter of setting those popups to display: none; and then letting JavaScript change the display to block and back again.