dHTML Drop Down Menu Tutorial - Part 8

Showing the menus

The Code

There are actually two functions for showing the menus:

showMenu()

The "showMenu()" function displays menus below the label they are assigned to. Menus can be aligned flush with the left or right edge of the label, or centered.

// -- FUNCTION ARGUEMENTS --
// m_No - the number of the menu
// eventObj - now I look at it I'm not exactly sure... I'll get rid of it ;-)
function showMenu(m_No, eventObj) {
  // hide all the other menus 
  hideAllMenusTier(tier[m_No]-1);
  
  var borderModSize = borderMod[m_No];
  if (ns4) {
    // change the background colour of the Menus Label for NS4
    changeBGColour('menuLabel' + m_No, onColours[m_No]);
  } else {
    // change the background colour for non-ns4 browsers...
    changeBGColour('labelCell' + m_No, onColours[m_No]);
    // ...and change the style class
    changeClass('menuLink' + m_No, onClass[m_No]);
  }
  // if the Menu Label has a bullet point then change it
  if (labelBulletName[m_No] != null){
    changeImage('menuBullet' + m_No, labelBulletName[m_No] + '.onImage');
  }
  
  // set the menu as "active"
  menuActive[m_No] = true;
  
  // if it's not a blank menu...
  if (menuType[m_No] != 'blank') {

    // work out the ID of the Menus Label 
    if (ns4) labelObj = 'menuLabel'+m_No;
    else labelObj = 'labelCell'+m_No;
	
    // get the X co-ord for the Menus Label
    x = getElementLeft(labelObj)-borderModSize;
	
    // get the Y co-ord of the bottom of the Menus Label
    y = getElementTop(labelObj) + getElementHeight(labelObj);

    // for centered menus...
    if (menus[m_No].align == 'center')
      // ...modify the X co-ord
      x = x + ((getElementWidth(labelObj)-getElementWidth('menu'+m_No))/2);

    // for right aligned menus...
    if (menus[m_No].align == 'right')
      // ...modify the X co-ord
      x = x + ((getElementWidth(labelObj)-
        getElementWidth('menu'+m_No))) + (borderModSize*2);

    // move the menu to it's rightful place
    moveXY('menu' + m_No, x, y);

    // and finally show the menu
    if(changeObjectVisibility('menu' + m_No, 'visible')) 
      return true;
    else
      return false;
  }
}

showMenuSide()

The "showMenuSide()" function displays menus flush with the top edge of their label. Menus can be displayed the left or right of the label.

// -- FUNCTION ARGUEMENTS --
// m_No - the number of the menu
// eventObj - hmmm... I'll get rid of this as well
// myTier - doh!
function showMenuSide(m_No, eventObj, myTier) {
  // hide all the other menus 
  hideAllMenusTier(tier[m_No]-1);
  
  var borderModSize = borderMod[m_No];
  
  if (ns4) {
    // change the background colour for NS4
    changeBGColour('menuLabel' + m_No, onColours[m_No]);
  } else {
    // change the background colour for non-ns4 browsers...
    changeBGColour('labelCell' + m_No, onColours[m_No]);
    // and change it's style class
    changeClass('menuLink' + m_No, onClass[m_No]);
  }
  
  
  // if the Menu Label has a bullet point then change it
  if (labelBulletName[m_No] != null) 
    changeImage('menuBullet' + m_No, labelBulletName[m_No] + '.onImage');
	
  // set the menu as "active"
  menuActive[m_No] = true;
   
  // if it's not a blank menu...
  if (menuType[m_No] != 'blank') {
  
  
    // work out the ID of the Menus Label 
    if (ns4) {
      labelObj = 'menuLabel'+m_No;
    } else {
      labelObj = 'labelCell'+m_No;
      if (mac_ie) labelObj = 'labelRow'+m_No;
    }
	
    // get the X co-ord for the Menus Label	
    x = getElementLeft(labelObj);

    // get the Y co-ord of the bottom of the Menus Label
    y = getElementTop(labelObj) - borderModSize;

    // for right aligned menus...
    if (menus[m_No].align=='right')
      // adjust the X co-ord to the right of its Label
      x = x + getElementWidth(labelObj);
    else 
      // or a menu-width to the left
      x = x - getElementWidth('menu'+m_No);

    // move the menu to it's correct placement...
    moveXY('menu' + m_No, x, y);
	
    // ...and display it
    if(changeObjectVisibility('menu' + m_No, 'visible'))
      return true;
    else
      return false;
  }
}