• distinguishes between passing and hovering over the navigation links
• dynamic positioning of menus results in less code and complexity
• navigation support for non-JavaScript and text-only browsers like Lynx

One of my design goals for this site was to minimize the real estate needed for a navigation menu while retaining as much utility as possible and providing current location context information. I decided to use a drop-down menu but ruled out any model that required images or that would collapse completely if JavaScript was not enabled or part of the user's browser. I also wanted to avoid what I considered to be design bugs in other menu implementations such as menus that too easily get stuck "on" or those that require a very rigid page layout.

While the lack of graphics may make the menus appear low-tech they are lightweight and flexible. Using traditional text anchors presents a simple and intuitive scheme to the user as the "activation" areas for the menus are in fact simply a standard and familiar text link. And as a result the navigation system also degrades gracefully for non-JavaScript or text-only browsers such as Lynx; the navigation options are more limited but it is still easy to move between sections of the site. The code also attempts to make the activate and deactivate behavior more user-friendly. Ever visit a site where the menus pop-up or vanish instantly without mercy or delay? It seems to me that a menu should not activate just because the mouse passes over it on the way to something else in the browser window or on the desktop. Nor should it vanish the instant the mouse strays just outside its border. Instead, this code monitors mouse movement and will only activate the menu if the mouse remains over the link for at least 70 milliseconds. And the menus have a built-in hold; they remain displayed as long as the mouse is hovering over one of the menu links and continue to be displayed briefly if the mouse is outside the menu area. Try out the links at the top of this page. If the mouse passes over the link quickly there is no activation; pass over it more slowly and the menu will activate.

Another feature I wanted to avoid was the need for lots of JavaScript and style sheet code to get the layers aligned. Here the code relies on single cell TABLE structures and a positioning trick. The trick is simply to float the menus based on an offset from the initial link activation position. The vertical displacement gets fixed once one of the menus on a page is activated; the horizontal displacement continues to float based on where the mouse crosses onto the link. Again, you can test this out on the menus above. Try initially crossing the links from below or above (reloading the page in between) or selecting the links multiple times but from different places along the length of the link text.

Finally, a background colour or image can be specified for the menu TABLEs if the the menus display over a busy or non-plain background.

JavaScript source: click here to have a look at the
source code for navigation menu.