dHTML Drop Down Menu Tutorial - Part 6b

Building the Menu Bar - Adding menu labels

Quick Tip: Early revisions of my menu code used multiple document.write statements to write the html one line at a time. This works fine in most browsers except Opera 5.x (and to a lesser extent Opera 6.x) where document.write seems to be very slow. In this system we'll build fewer, longer strings. This greatly increases the speed in the Opera browsers.

This method builds a string of HTML for a menu label and stores it it in the labelText array. Due to differences in Netscape 4, the code is quite long. Netscape 4 uses a layer nested in an ilayer (mouseover and mouseout events are attached to the layer - NS4 doesn't offer onclick events for layers). The other browsers use just a div element (the events are attached to the parent td element).

The Code

// -- METHOD ARGUMENTS --
// bullet: the name of a bullet object or null
// labelText: the text to appear in the menu label
// menuNo: the number of the menu which pops from this menu label
//   (can be a blank menu - i.e. one with no menu items)
// labelWidth: width of the label in pixels
// offColour: the background colour of the label's "off" state
// onColour: the background colour of the label's "on" state
// labelURL: the URL of the page the menu label links to 
// align: the text alignment can be 'left', 'right', or 'center'
//   (note American spelling in this case)


this.addLabel = function(bullet, labelText, menuNo, 
  labelWidth, offColour, onColour, labelURL, align) {
 
  // increment the counter of menu labels in the menu bar 
  this.numLabels += 1;
  
  // set the tier for the menu hanging from this label
  tier[menuNo] = 0;		

  // this is an offset for placing the menu due to the outer border
  if (this.o_Bor != null) borderMod[menuNo] = 1;	
  else borderMod[menuNo] = 0;
  	
  // set the globals for the menu label
  if (menuNo != null) {
    onColours[menuNo] = onColour;
    offColours[menuNo] = offColour;
    onClass[menuNo] = this.onClass;
    offClass[menuNo] = this.offClass;
    labelBulletName[menuNo] = bullet;
  }
	
  // create a temporary string object to hold
  // the html for the menu label
  temp = new String('');

  // create a string object to hold the row tag
  // for the label (if necessary)
  this.rowText[this.numLabels] = new String('');
  
  if (this.orientation == 'vertical') 
    this.rowText[this.numLabels] += '<tr id="labelRow'+ menuNo + '">';

  // create the td tag
  temp += '<td id="labelCell' + menuNo + '" width="'+ labelWidth + '" bgcolor="' + 
    offColour + '" valign="middle" height="' + this.height + '" ';
		
  // if the browser ISN'T Netscape 4...  
  if (!ns4) {
    // ...attach events to the td tag
    temp += ' onmouseout="menuOut(); "onmouseover="menuOver(); ';
	
    if (this.orientation == 'vertical') 
      temp += 'return !showMenuSide('+ menuNo+', event, tier['+menuNo+']);" ';
    else 
      temp += 'return !showMenu(' + menuNo + ', event);" ';
	  
    if (this.targetType=='self') 
      temp += ' onclick="document.location.href=\'' + labelURL + '\';" ';
    if (this.targetType=='new') 
      temp += ' onclick="openMe(\'' + labelURL + '\'); return false;" ';
    if (this.targetType=='frame') 
      temp += ' onclick="parent.' + this.targetFrame + 
        '.document.location.href=\'' + labelURL + '\';" ';
    if (this.targetType=='iframe') 
      temp += ' onclick="' + this.targetFrame + '.location.href=\'' + 
        labelURL + '\';" ';
  } 
  // close the td tag	
  temp +='>';

  // if the browser IS Netscape 4...	
  if (ns4) {
    // ...create layer within an ilayer and attach the events to this
    temp +='<ilayer><layer onmouseout="menuOut();" onmouseover="menuOver(); ';
    if (this.orientation == 'vertical') 
      temp +='return !showMenuSide('+menuNo+', event, tier['+menuNo+']);" ';
    else 
      temp +='return !showMenu(' + menuNo + ', event);" ';
  } else {
    // if NOT Netscape 4 we use a div tag instead
    temp +='<div ';
  }

  // give the layer/div an ID and start the link tag
  temp += ' class="myMenuLabel' + align + '" width="' + labelWidth + 
    '"  id="menuLabel' + menuNo +'"><a href="' + labelURL +'" 
    target="' + this.targetFrame + '" class="' + this.offClass + '" 
    id="menuLink' + menuNo +'">';
	
  // if bullet points are enabled...
  if (bullet != null) 
    // put in the bullet point
    temp += '<img src="' + eval(bullet + ".URL") + '" border="0" 
      align="' + this.bulletAlign + '" 
      id="menuBullet' + menuNo + '" name="menuBullet' + menuNo + '">';
	
  // close the link tag
  temp += labelText + '</a>';
		
  // close the layer or div (depending on browser)
  if (ns4) temp += '</layer></ilayer>';
  else temp += '</div>';
		
  // close the td tag
  temp += '</td>';	
  
  // create a string object and store the HTML
  // from the temporary string in it for later
  this.labelText[this.numLabels] = new String(temp);
}

Usage

The following Code adds three menu labels to the menu bar:

myTest.addLabel('menuItemBullet', 'test1', 1, 150, '#cccccc', 
  '#ffffff', 'test1.asp', 'left');
myTest.addLabel('labelBullet', 'test2', 2, 150, '#cccccc', 
  '#ffffff', 'test2.asp', 'center');
myTest.addLabel('subMenuBullet', 'test3', 3, 150, '#cccccc', 
  '#ffffff', 'test3.asp', 'right');