dHTML Drop Down Menu Tutorial - Part 9

Hiding the menus

There are five functions involved in hiding the menus:

The Code

hideAllMenus()

"hideAllMenus()" hides every menu in the menu system by calling hideMenu() for each menu in turn.

function hideAllMenus() {
  // loop through all menus in the system
  for (var i = 1; i < (currentMenuNo+1); i++) {
    // if the menu is active then hide it
    if(menuActive[i] == true) hideMenu(i);
  }
}

hideAllMenusTier()

"hideAllMenus()" hides every menu that is in a tier above "myTier" by calling hideMenu() for each menu in turn. This function is used to hide sub menus when the mouse goes over a Menu Item.

function hideAllMenusTier(myTier) {
  // loop through all the menus in the system
  for (var i = 1; i < (currentMenuNo+1); i++) {
    // if the tier is higher and already active then hide the menu 
    if( tier[i] > myTier && menuActive[i] == true) hideMenu(i);
  }
}

hideMenu()

This function does the actual work of hiding the menu and putting the corresponding Menu Label back to it's "off" state.

function hideMenu(m_No) {
  if (ns4) {
    // change the Label background colour of "off" in NS4
    changeBGColour('menuLabel' + m_No, offColours[m_No]);
  } else {
    // change the Label background colour of "off" (NOT NS4)...
    changeBGColour('labelCell' + m_No, offColours[m_No]);
    // ...and change the style class
    changeClass('menuLink' + m_No, offClass[m_No]);
  }
  
  // if there's a bullet in the Label...
  if (labelBulletName[m_No] != null){
    // change it back to the "off" state
    changeImage('menuBullet' + m_No, labelBulletName[m_No] + '.offImage');
  }
  
  // set the menu to "off"
  menuActive[m_No] = false;
  
  // finally hide the menu
  if(changeObjectVisibility('menu' + m_No, 'hidden'))
    return true;
  else
    return false;

}

menuOut()

This function is called when the mouse leaves a Menu Item or Label. It creates a timer which hides all the menus after 1 second. This prevents menus being left open unnecessarily. If the mouse then goes over a meighbouring Menu Item or Label, "menuOver()" is called to cancel the timer.

function menuOut() {
  timeOn = setTimeout("hideAllMenus()", 1000);
}

menuOver()

This function cancels the timer created by "menuOut()" when the mouse enters a Menu Item or Menu Label.

function menuOver() {
  clearTimeout(timeOn);
}