dHTML Drop Down Menu Tutorial - Part 6a

Building the Menu Bar - The "menuBar" Object

The menuBar object does the job of building the HTML for the menu bar.

Below are the properties of the object (the two methods are covered later).

// -- OBJECT ARGUMENTS: --
// barName: an ID for the DIV that surrounds the menu bar
//   which can then be altered using CSS
// barWidth: the width of the menu bar in pixels
// orientation: can be 'horizontal' or 'vertical'
// i_Bor: Inner border colour (between the menu labels)
//   (set as 'null' for no inner border)
// o_Bor: Outer border colour(around the menu bar as a whole)
//   (set as 'null' for no outer border)


function menuBar(barName, barWidth, orientation, i_Bor, o_Bor) {

// --- PRIVATE PROPERTIES --

  // used internally count the number of labels in the menu bar
  this.numLabels = 0;

  // store the border colours and orientation
  this.i_Bor = i_Bor;	
  this.o_Bor = o_Bor;	
  this.orientation = orientation;
 
  // used to store the HTML for the menu bar 
  this.labelText = new Array();
  // used in vertical menu bars to store the row element 
  this.rowText = new Array();


// -- PUBLIC PROPERTIES --
// can be altered BEFORE adding menu labels to the menu bar

// height of the bar in pixels
  this.height = 15;

// the classes for the links	
  this.offClass = 'MenuLabelLink';
  this.onClass = 'MenuLabelLinkOn';

// alignment of the bullet points (if any)
// can be 'left' or 'right'
  this.bulletAlign = 'left';

// can be 'self', 'iframe', 'frame', 'new'  
  this.targetType = 'self'; 

// '_self', '_blank' or (i)frame name  
  this.targetFrame = '_self'; 
	
// -- METHODS -- 
// (described later)
  this.addLabel = function(bullet, labelText, menuNo, labelWidth, 
    offColour, onColour, labelURL, align) {
    // code displayed later
  }
  this.writeMenuBar = function() {
    // code displayed later
  }
}

Usage

The following creates a 450 pixel wide horizontal menu bar called "myTest":

myTest = new menuBar('myTest',450, 'horizontal', '#ff0000', '#000000');