Bookmark and Share

Revenge of the Menu Bar

See the demo page for the finished version of the code.

The Menu mouseover Event Handler

The menuMouseover() function handles this. It fires any time the mouse moves over any part of the menu, except for item links that have a sub menu (because they capture the event first and handle it themselves).

function menuMouseover(event) {

  var menu;

  // Find the target menu element.

  if (browser.isIE)
    menu = getContainerWith(window.event.srcElement, "DIV", "menu");
    menu = event.currentTarget;

  // Close any active sub menu.

  if (menu.activeItem != null)

It first identifies the target menu and checks to see if it has an activeItem set. If so, it calls closeSubMenu() which takes care of hiding that sub menu (and any sub menus it may have active).

function closeSubMenu(menu) {

  if (menu == null || menu.activeItem == null)

  // Recursively close any sub menus.

  if (menu.activeItem.subMenu != null) {
    menu.activeItem.subMenu.style.visibility = "hidden";
    menu.activeItem.subMenu = null;
  removeClassName(menu.activeItem, "menuItemHighlight");
  menu.activeItem = null;

closeSubMenu() is a recursive function. Given a menu, it checks it for an active item. If there is one, it first calls itself on that item's sub menu. This effectively runs down the activeItem -> subMenu -> activeItem -> subMenu ->... chain, deactivating them as it goes.

Once a sub menu has been hidden, it unhighlights the active menu item and clears those references.

With all this code in place, the menu bar will function as desired. However, there is one last glitch (with IE browsers) to take care of.