var isDOM = document.getElementById?1:0;

var isIE = document.all?1:0;

var isNS4 = (navigator.appName=='Netscape' && !isDOM)?1:0;

var isIE4 = (isIE && !isDOM)?1:0;

var isDyn = (isDOM||isIE||isNS4);



function getRef(id, par)

{

 par = !par ? document : (par.navigator?par.document:par);

 return (isIE ? par.all[id] :

  (isDOM ? (par.getElementById?par:par.ownerDocument).getElementById(id) :

  par.layers[id]));

}



function getSty(id, par)

{

 return (isNS4 ? getRef(id, par) : getRef(id, par).style)

}



if (!window.LayerObj) var LayerObj = new Function('id', 'par',

 'this.ref=getRef(id, par); this.sty=getSty(id, par); return this');

function getLyr(id, par) { return new LayerObj(id, par) }



function LyrFn(fn, fc)

{

 LayerObj.prototype[fn] = new Function('var a=arguments,p=a[0]; with (this) { '+fc+' }');

}

LyrFn('x','if (!isNaN(p)) sty.left=p; else return parseInt(sty.left)');

LyrFn('y','if (!isNaN(p)) sty.top=p; else return parseInt(sty.top)');

LyrFn('vis','sty.visibility=p');

LyrFn('bgColor','if (isNS4) sty.bgColor=(p?p:null); ' +

 'else sty.background=p?p:"transparent"');

LyrFn('bgImage','if (isNS4) sty.background.src=(p?p:null); ' + 

 'else sty.background=(p?"url("+p+")":"") ');

LyrFn('clip','if (isNS4) with(sty.clip) { left=a[0]; top=a[1]; right=a[2]; bottom=a[3] } ' +

 'else sty.clip="rect("+a[1]+"px "+a[2]+"px "+a[3]+"px "+a[0]+"px)" ');

LyrFn('write','if (isNS4) with (ref.document) {write(p);close()} else ref.innerHTML=p');

LyrFn('alpha','var f=ref.filters; if (f) {' +

 'if (sty.filter.indexOf("alpha")==-1) sty.filter+="alpha()"; ' +

 'if (f.length&&f.alpha) f.alpha.opacity=p } else if (isDOM) sty.MozOpacity=(p/100)');





function setLyr(lVis, docW, par)

{

 if (!setLyr.seq) setLyr.seq=0;

 if (!docW) docW=0;

 var obj = (!par ? (isNS4 ? window : document.body) :

  (!isNS4 && par.navigator ? par.document.body : par));

 var newID='_js_layer_'+setLyr.seq++;



 if (isIE&&!window.opera) obj.insertAdjacentHTML('beforeEnd', '<div id="'+newID+

  '" style="position:absolute"></div>');

 else if (isDOM)

 {

  var newL=document.createElement('div');

  obj.appendChild(newL);

  newL.id=newID; newL.style.position='absolute';

 }

 else if (isNS4)

 {

  var newL=new Layer(docW, obj);

  newID=newL.id;

 }



 var lObj=getLyr(newID, par);

 with (lObj.sty) { visibility=lVis; left=0; top=0; width=docW }

 return lObj;

}





if (!window.page) var page = { win: window, minW: 0, minH: 0, MS: isIE&&!window.opera }



page.winW=function()

 { with (this) return Math.max(minW, MS?win.document.body.clientWidth:win.innerWidth) }

page.winH=function()

 { with (this) return Math.max(minH, MS?win.document.body.clientHeight:win.innerHeight) }



page.scrollX=function()

 { with (this) return MS?win.document.body.scrollLeft:win.pageXOffset }

page.scrollY=function()

 { with (this) return MS?win.document.body.scrollTop:win.pageYOffset }







// *** MOUSE EVENT CONTROL FUNCTIONS ***





// Most of these are passed the relevant 'menu Name' and 'item Number'.

// The 'with (this)' means it uses the properties and functions of the current menu object.

function popOver(mN, iN) { with (this)

{

 // Cancel any pending menu hides from a previous mouseout.

 clearTimeout(hideTimer);

 // Set the 'over' variables to point to this item.

 overM = mN;

 overI = iN;

 // A quick reference to this item.

 var thisI = menu[mN][iN];



 // Call the 'onMouseOver' event if it exists, and the item number is 1 or more.

 if (iN && this.onmouseover) this.onmouseover();





 // Remember what was lit last time, and compute a new hierarchy.

 litOld = litNow;

 litNow = new Array();

 var litM = mN, litI = iN;

 while(1)

 {

  litNow[litM] = litI;

  // If we've reached the top of the hierarchy, exit loop.

  if (litM == 'root') break;

  // Otherwise repeat with this menu's parent.

  litI = menu[litM][0].parentItem;

  litM = menu[litM][0].parentMenu;

 }



 // If the two arrays are the same, return... no use hiding/lighting otherwise.

 var same = true;

 for (var z in menu) if (litNow[z] != litOld[z]) same = false;

 if (same) return;







 // Cycle through menu array, lighting and hiding menus as necessary.

 for (thisM in menu) with (menu[thisM][0])

 {

  // Doesn't exist yet? Keep rollin'...

  if (!lyr) continue;



  // The number of this menu's item that is to be lit, undefined if none.

  litI = litNow[thisM];

  oldI = litOld[thisM];



  // If it's lit now and wasn't before, highlight...

  if (litI && (litI != oldI)) changeCol(thisM, litI, true);



  // If this item was lit but another is now, dim the old item.

  if (oldI && (oldI != litI)) changeCol(thisM, oldI, false);



  // Make sure if it's lit, it's shown, and set the visNow flag.

  if (litI && !visNow && (thisM != 'root'))

  {

   showMenu(thisM);

   visNow = true;

  }



  // If this menu has no items from the current hierarchy in it, and is currently

  // onscreen, call the hide function.

  if (isNaN(litI) && visNow)

  {

   hideMenu(thisM);

   visNow = false;

  }

 }





 // Get target menu to show - if we've got one, position & show it.

 clearTimeout(showTimer);

 nextMenu = '';

 if (thisI.type == 'sm:')

 {

  // The target menu and the layer object of the current menu itself (not this item).

  var targ = thisI.href, lyrM = menu[mN][0].lyr;



  // Add current menu/item positions to the target's offset to set its position, show it.

  with (menu[targ][0])

  {

   // If the target menu has not been created yet, return as we can't do anything.

   if (!lyr || !lyr.ref) return;



   // If the offset is a number add this item's position else just calculate position.

   lyr.x(eval(offX) + (typeof(offX)=='number' ? lyrM.x() + thisI.lyr.x() : 0));

   lyr.y(eval(offY) + (typeof(offY)=='number' ? lyrM.y() + thisI.lyr.y() : 0));



   // Either show immediately or after a delay if set. Set nextMenu to the impending show.

   showStr = myName + '.showMenu("' + targ + '"); ' +

    myName + '.menu.' + targ + '[0].visNow = true';

   nextMenu = targ;

   if (showDelay) showTimer = setTimeout(showStr, showDelay);

   else eval(showStr);

  }

 }

}}





function popChangeCol(mN, iN, isOver) { with (this.menu[mN][iN])

{

 // Swap the background colour/image depending on highlight state.

 // If it's got a period in it, call it an image, otherwise it must be a colour.

 var col = isOver ? overCol : outCol;

 if (col.indexOf('.') == -1) lyr.bgColor(col);

 else lyr.bgImage(col);



 // Test for other style changes, we can skip them if not needed.

 var doFX = ((overClass != outClass) || (outBorder != overBorder));



 // In Netscape 4, rewrite layer contents (causes a little flickering)...

 if (doFX && isNS4) lyr.write(this.getHTML(mN, iN, isOver));



 // ...otherwise manipulate the DOM tree for IE/NS6+ (faster than rewriting contents).

 else if (doFX) with (lyr)

 {

  ref.className = (isOver ? overBorder : outBorder);

  var chl = (isDOM ? ref.childNodes : ref.children)

  if (chl) for (var i = 0; i < chl.length; i++)

   chl[i].className = (isOver ? overClass : outClass);

 }



 // Alpha filtering activated? Might as well set that then too...

 // Weirdly it has to be done after the border change, another random Mozilla bug...

 if (typeof(outAlpha)=='number') lyr.alpha(isOver ? overAlpha : outAlpha);

}}





function popOut(mN, iN) { with (this)

{

 // Sometimes, across frames, overs and outs can get confused. If this is called before

 // the relevant over command, return...

 if ((mN != overM) || (iN != overI)) return;

 // Evaluate the onmouseout event, if any.

 if (this.onmouseout) this.onmouseout();



 var thisI = menu[mN][iN];



 // Stop showing another menu if this item isn't pointing to the same one.

 if (thisI.href != nextMenu) clearTimeout(showTimer);



 // Hide all menus rapidly (if it's a root menu item without a popout) or as specified.

 // Remember that the timeout is cancelled by another instance of the over function.

 // Calling 'over("root", 0)' hides all menus but the root menu, and highlights no items.

 // If hideDelay equals zero the menus are never hidden.

 if (hideDelay)

 {

  var delay = ((mN == 'root') && (thisI.type != 'sm:')) ? 50 : hideDelay;

  hideTimer = setTimeout(myName + '.over("root", 0)', delay);

 }



 // Clear the 'over' variables.

 overM = 'root';

 overI = 0;

}}





function popClick(evt) { with (this)

{

 // If the moused over item number isn't 0, activate it!

 if (overI)

 {

  // Evaluate the onclick event, if any.

  if (this.onclick) this.onclick();



  var thisI = menu[overM][overI];



  with (thisI) switch (type)

  {

   // Targeting another popout? Clicking will get you nowhere...

   case 'sm:': return;

   // A JavaScript function? Eval() it and break out of switch.

   case 'js:': { eval(href); break }

   // Otherwise, point to the window if nothing else and navigate.

   case '': type = 'window';

   default: if (href) eval(type + '.location.href = "' + href + '"');

  }

 }



 // Whatever happens, hide the menus when clicked.

 over('root', 0);

}}





function popClearLyr(wN) { with (this)

{

 // Pass a window name on unload. Any menus in that window have their layer objects

 // deleted, for re-creation later.

 for (mN in menu) with (menu[mN][0]) if (par == wN) lyr = null;

}}







// *** MENU OBJECT CONSTRUCTION FUNCTIONS ***



// This takes arrays of data and names and assigns the values to a specified object.

function addProps(obj, data, names, addNull)

{

 for (var i = 0; i < names.length; i++) if(i < data.length || addNull) obj[names[i]] = data[i];

}



function ItemStyle()

{

 // Like the other constructors, this passes a list of property names that correspond to the list

 // of arguments. Feel free to add more than the first 4 to the addItem() command if you want.

 var names = ['len', 'spacing', 'popInd', 'popPos', 'pad', 'outCol', 'overCol', 'outClass',

  'overClass', 'outBorder', 'overBorder', 'outAlpha', 'overAlpha'];

 addProps(this, arguments, names, true);

}



function popStartMenu(mName) { with (this)

{

 // Create a new array within the menu object if none exists already, and a new menu object within.

 if (!menu[mName]) { menu[mName] = new Array(); menu[mName][0] = new Object(); }



 // Set this as the active menu to which new items are added, and clean out existing items.

 actMenu = mName;

 menu[mName].length = 1;

 nextItem = 1;

 // A quick reference to the current menu descriptor -- array index 0, 1+ are items.

 var aM = menu[mName][0];



 // Not all of these are actually passed to the constructor -- the last few are null.

 // N.B: I pass 'isVert' twice so the first parameter (the menu name) is overwritten & ignored.

 var names = ['isVert', 'isVert', 'offX','offY', 'width', 'itemSty', 'par', 'parentMenu',

  'parentItem', 'visNow', 'menuW', 'menuH'];

 addProps(aM, arguments, names, true);



 // Reuse old layers if we can, no use creating new ones every time the menus refresh.

 if (!aM.lyr) aM.lyr = null;

}}



function popAddItem() { with (this)

{

 // Add these properties onto a new 'active Item' at the end of the active menu.

 var aI = menu[actMenu][nextItem++] = new Object();



 // Add function parameters to object. Again, the last three are undefined, set later.

 var names = ['text', 'href', 'type', 'itemSty', 'len', 'spacing', 'popInd', 'popPos',

  'pad', 'outCol', 'overCol', 'outClass', 'overClass', 'outBorder', 'overBorder',

  'outAlpha', 'overAlpha', 'iW', 'iH', 'lyr'];

 addProps(aI, arguments, names, true);



 // Find an applicable itemSty -- either passed to this item or the menu[0] object.

 var iSty = (arguments[3] ? arguments[3] : menu[actMenu][0].itemSty);

 // Loop through its properties, add them if they don't already exist (overridden e.g. length).

 for (prop in iSty) if (aI[prop] == window.UnDeFiNeD) aI[prop] = iSty[prop];



 // In NS4, since borders are assigned to the contents rather than the layer, increase padding.

 if (aI.outBorder)

 {

  if (isNS4) aI.pad++;

 }

}}







// *** MAIN MENU CREATION/UPDATE FUNCTIONS ***



// Returns the inner HTML of an item, used for menu generation, and highlights in NS4.

function popGetHTML(mN, iN, isOver) { with (this)

{

 var itemStr = '';

 with (menu[mN][iN])

 {

  var textClass = (isOver ? overClass : outClass);



  // If we're supposed to add a popout indicator, add it before text so it appears below in NS4.

  // Note the (iW - 15): the position is hardcoded at 15px from the item's right edge.

  if ((type == 'sm:') && popInd)

  {

   if (isNS4) itemStr += '<layer class="' + textClass + '" left="'+ ((popPos+iW) % iW) +

    '" top="' + pad + '">' + popInd + '</layer>';

   else itemStr += '<div class="' + textClass + '" style="position: absolute; left: ' +

    ((popPos+iW) % iW) + '; top: ' + pad + '">' + popInd + '</div>';

  }



  // For NS4, if a border is assigned, add a spacer to push border out to layer edges.

  // The text layer must completely overlay this table as well for proper click capturing.

  // Add a link both to generate an onClick event and to stop the ugly I-beam text cursor appearing.

  if (isNS4) itemStr += (outBorder ? '<span class="' + (isOver ? overBorder : outBorder) +

   '"><spacer type="block" width="' + (iW - 8) + '" height="' + (iH - 8) + '"></span>' : '') +

   '<layer left="' + pad + '" top="' + pad + '" width="' + (iW - (2 * pad)) + '" height="' +

   (iH - (2 * pad)) + '"><a class="' + textClass + '" href="#" ' +

   'onClick="return false" onMouseOver="status=\'\'; ' + myName + '.over(\'' + mN + '\',' +

   iN + '); return true">' + text + '</a></layer>';



  // IE4+/NS6 is an awful lot easier to work with sometimes.

  else itemStr += '<div class="' + textClass + '" style="position: absolute; left: ' + pad +

   '; top: ' + pad + '; width: ' + (iW - (2 * pad)) + '; height: ' + (iH - (2 * pad)) +

   '">' + text + '</div>';

 }

 return itemStr;

}}





// The main menu creation/update routine. The first parameter is 'true' if you want the script

// to use document.write() to create the menus. Second parameter is optionally the name of one

// menu only to update rather then create al menus.

function popUpdate(docWrite, upMN) { with (this)

{

 // 'isDyn' (set at the very top of the script) signifies a DHTML-capable browser.

 if (!isDyn) return;



 // Loop through menus, using properties of menu description object (array index 0)...

 for (mN in menu) with (menu[mN][0])

 {

  // If we're updating one specific menu, only run the code for that.

  if (upMN && (upMN != mN)) continue;



  // Variable for holding HTML for items and positions of next item.

  var str = '', iX = 0, iY = 0;



  // Remember, items start from 1 in the array (0 is menu object itself, above).

  // Also use properties of each item nested in the other with() for construction.

  for (var iN = 1; iN < menu[mN].length; iN++) with (menu[mN][iN])

  {

   // An ID for divs/layers contained within the menu.

   var itemID = myName + '_' + mN + '_' + iN;



   // Now is a good time to assign another menu's parent to this if we've got a popout item.

   var targM = menu[href];

   if (targM && (type == 'sm:'))

   {

    targM[0].parentMenu = mN;

    targM[0].parentItem = iN;

   }



   // NS6 and Opera disagree with IE and NS4 as to whether borders increase div widths, so we

   // subtract some pixels here to go with the old 'loose' specification. Swap this around if you

   // want your documents to conform with the new specs.

   var shrink = (outBorder && ((isDOM && !isIE) || window.opera) ? 2 : 0)

   // The actual dimensions of the items, store as item properties so they can be accessed later.

   iW = (isVert ? width : len) - shrink;

   iH = (isVert ? len : width) - shrink;



   // Have we been given a background image? It'll have a period in its name if so...

   var isImg = (outCol.indexOf('.') != -1) ? true : false;



   // Create a div or layer text string with appropriate styles/properties.

   // OK, OK, I know this is a little obtuse in syntax, but it's small...

   // At the end we set the alpha transparency (if specified) and cursor to be a hand

   // if it's not a 'sm:' item or blank -- those items get a regular cursor

   if (isDOM || isIE4)

   {

    str += '<div id="' + itemID + '" ' + (outBorder ? 'class="' + outBorder + '" ' : '') +

     'style="position: absolute; left: ' + iX + '; top: ' + iY + '; width: ' + iW + '; height: ' +

     iH + '; background: ' + (isImg ? 'url('+outCol+')' : outCol) +

     ((typeof(outAlpha)=='number') ? '; filter: alpha(opacity='+ outAlpha + '); -moz-opacity: ' +

      (outAlpha/100) : '') +

     '; cursor: ' + ((type!='sm:' && href) ? (isIE ? 'hand' : 'pointer') : 'default') + '" ';

   }

   else if (isNS4)

   {

    // NS4's borders must be assigned within the layer so they stay when content is replaced.

    str += '<layer id="' + itemID + '" left="' + iX + '" top="' + iY + '" width="' +

     iW + '" height="' + iH + '" ' + (outCol ? (isImg ? 'background="' : 'bgcolor="') +

     outCol + '" ' : '');

   }



   // Add mouseover and click handlers, contents, and finish div/layer.

   str += 'onMouseOver="' + myName + '.over(\'' + mN + '\',' + iN + ')" ' +

     'onMouseOut="' + myName + '.out(\'' + mN + '\',' + iN + ')">' +

     getHTML(mN, iN, false) + (isNS4 ? '</layer>' : '</div>');



   // Move next item position down or across by this item's length and additional spacing.

   // Subtract 1 so borders overlap slightly.

   var spc = (outBorder ? 1 : 0)

   if (isVert) iY += len + spacing - spc;

   else iX += len + spacing - spc;



  // End loop through items and with(menu[mN][iN]).

  }





  // Record the last item position as the dimensions of this menu.

  // N.B: Still using properties of menu[mN][0]...

  menuW = isVert ? width : iX;

  menuH = isVert ? iY : width;







  // The parent frame for this menu, if any.

  var eP = eval(par);





  // Do not ask me why Opera makes me set a timeout now rather than later, or in fact have

  // to set a timeout at all to get references to the divs we are about to create.

  // But, it makes the cross-frame version of the script actually work, so there's a benefit.

  setTimeout(myName + '.setupRef("' + mN + '")', 50);

  

  // For Fast creation mode (default for IE, NS6, Opera), write the menus to the document now.

  if (docWrite)

  {

   // Find the right target frame.

   var targFr = (eP && eP.navigator ? eP : window);

   targFr.document.write('<div id="' + myName + '_' + mN + '_Div" style="position: absolute; ' +

    'visibility: hidden; width: ' + menuW + '; height: ' + menuH + '; z-index: 1000">' +

    str + '</div>');

  }

  else

  {

   // Create a new layer/div object dynamically using my setLyr() function above.

   // If we've got a layer created already, there's no use creating another!.

   // In IE4, we must shrink the menus to stop them sizing to the full body size -- thanks

   // to Jeff Blum and Paul Maden for debugging this for me :). If the layer has been created,

   // we've got to set a timeout to fix up IE4 again for some obscure reason.

   if (!lyr) lyr = setLyr('hidden', menuW, eP);

   else if (isIE4) setTimeout(myName + '.menu.' + mN + '[0].lyr.sty.width=' + (menuW+2), 50);



   // Give it a high Z-index, and write its content.

   with (lyr) { sty.zIndex = 1000; write(str) }

  }



 // End loop through menus and with (menu[mN][0]).

 }

}}





function popSetupRef(mN) { with (this) with (menu[mN][0])

{

 // Get a reference to a div, only needed for Fast creation mode.

 if (!lyr || !lyr.ref) lyr = getLyr(myName + '_' + mN + '_Div', eval(par));



 // Loop through menu items again to set up individual references.

 for (var i = 1; i < menu[mN].length; i++)

  menu[mN][i].lyr = getLyr(myName + '_' + mN + '_' + i, lyr.ref);



 // Position and show the root menu once written. Phew!

 if (mN == 'root')

 {

  position();

  lyr.vis('visible');

 }

}}





function popPosition(wN) { with (this)

{

 // Pass this a window name to position the absolute menus in that window, otherwise all are.

 for (mN in menu) if (!wN || menu[mN][0].par == wN) with (menu[mN][0])

 {

  // If the menu hasn't been created, and there's no layer reference, loop.

  if (!lyr || !lyr.ref) continue;



  // If either of the offsets is a string or its the root menu, position it.

  if (typeof(offX)!='number' || mN=='root') lyr.x(eval(offX));

  if (typeof(offY)!='number' || mN=='root') lyr.y(eval(offY));

 }

}}





// *** POPUP MENU MAIN OBJECT CONSTRUCTOR ***



function PopupMenu(myName)

{

 // These are the properties of any PopupMenu objects you create.

 this.myName = myName;



 // Manage what gets lit and shown when.

 this.showTimer = 0;

 this.hideTimer = 0;

 this.showDelay = 0;

 this.hideDelay = 500;

 this.showMenu = '';



 // 'menu': the main data store, contains subarrays for each menu e.g. pMenu.menu['root'][];

 this.menu =  new Array();

 // litNow and litOld arrays control what items get lit in the hierarchy.

 this.litNow = new Array();

 this.litOld = new Array();



 // The item the mouse is currently over. Used by click processor to help NS4.

 this.overM = 'root';

 this.overI = 0;



 // The active menu and next item to which addItem() will assign its results. startMenu() sets

 // these automatically, set them manually if you want to call addItem() yourself, e.g.:

 // actMenu = 'root'; nextItem = 5; addItem('Another root menu item'...);

 this.actMenu = '';

 this.nextItem = 1;



 // Functions to create and manage the menu.

 this.over = popOver;

 this.changeCol = popChangeCol;

 this.out = popOut;

 this.click = popClick;

 this.clearLyr = popClearLyr;

 this.startMenu = popStartMenu;

 this.addItem = popAddItem;

 this.getHTML = popGetHTML;

 this.update = popUpdate;

 this.setupRef = popSetupRef;

 this.position = popPosition;

 

 // Default show and hide functions, overridden in the example script by the clipping routine.

 this.showMenu = function(mName) { this.menu[mName][0].lyr.vis('visible') }

 this.hideMenu = function(mName) { this.menu[mName][0].lyr.vis('hidden') }

}



























// *** START EDITING HERE, READ THIS SECTION CAREFULLY! ***

//

//

// This menu script is split up into several sections. They are:

//

// (1) ITEMSTYLES - These define the colour and size of menu items. Compulsory.

// (2) MENU DATA - These specify the text and links in the menu. Compulsory.

// (3) EVENTS - Activate the menu(s), and choose creation mode (Dynamic / Fast) etc. I recommend

//     you read it, but you only really need to change it if you want multiple menus on one page,

//     or are trying to combine this with other JavaScripts.

// (4) ANIMATION - Change or remove menu animation here. Multiple menu users need to edit this.

// (5) FRAMESETS - Read this if you're using the menu across frames. Otherwise delete it.

// (6) OPTIONAL CODE - Extra features like adding clicking to 'sm:' items or status messages etc.

//     on mouseover. You can skip or delete this section.







// *** (1) ITEMSTYLES ***

//

// First of all we must create ItemStyles to use in the menu. ItemStyles are a collection of

// dimensions, colours, and font/border stylesheet class names used to control the appearance

// of items in the menu. The (somewhat lengthy) syntax is:

//

// styleName = new ItemStyle(length of items, spacing after items, 'popout indicator HTML',

//  popout indicator position, padding of text within item, 'out background colour or image

//  filename', 'hover background colour or image', 'out text stylesheet class', 'hover text class',

//  'out border stylesheet class', 'hover border class', out translucency percentage or null

//  for no translucency, hover translucency percentage or null);

//

// One thing that needs explaining is the popout indicator position -- you pass a positive

// integer to position it from the left of the item, and a negative integer to position it from

// the right edge of the item -- see the example code below if that doesn't make much sense.

// Pass an empty string '' as the over or out background for no background colours/image.

//

// Here are some examples used in this menu demo, read through and see how they're formatted:





// 'horizontal Bar' style: menu items that use this ItemStyle are 40px wide, have 10px spacing

// between them, no popout indicator (the ">" in some menus) or popout indicator position,

// 0px padding of the text within items, #006666 background colour, a hover colour of #669999,

// 'itemText' is the stylesheet class used for the menu text both normally and when highlighted,

// and no border classes. The last two nulls turn off translucency, set them to numbers

// between 0 and 100 to enable it. See the '<style>' tag for the classes used...

var hBar = new ItemStyle(200, 10, '', 0, 0, '#009933', '009933', 'itemHover1', 'itemHover', '', '',

 null, null);

var hlBar = new ItemStyle(175, 10, '', 0, 0, '#009933', '#009933', 'itemText', 'itemText', '', '',

 null, null);





// The 'sub Menu' items: 22px long, 0px spacing, a 'greater than' sign for a popout indicator

// (you may wish to use an image tag?), the popout indicator is positioned 15px from the right

// edge of the item, items have 3px padding, some colours, it uses 'itemText' as the dimmed text

// class but 'itemHover' when it is moused over, and 'itemBorder' as the border stylesheet class.

var subM = new ItemStyle(19, 0, '&gt;', -15, 3, '#ffffff', '#009933', 'itemHover', 'itemHover',

 'itemBorder', 'itemBorder', null, null);

var subM1 = new ItemStyle(19, 0, '&gt;', -15, 2, '#D6C193', '#ffffff', 'itemHover', 'itemHover',

 'itemBorder', 'itemBorder', null, null);



// The purplish 'crazy' style, same length but extra 1px spacing (to show up the fancy border) and

// different colours/text and less padding. They also have translucency set -- these items

// are 80% opaque when dim and 90% when highlighted.

var crazy = new ItemStyle(22, 1, '&gt;', -15, 2, '#666699', '#CC6600', 'crazyText', 'crazyHover',

 'crazyBorder', 'crazyBorderOver', 80, 90);









// *** (2) MENU DATA ***

//

// To use this script you must create one or more PopupMenu() objects, that will contain all

// the menu data and functions used. This demo contains one, named 'pMenu', although you can

// have as many separate menus as you want on one page.

//    Next we add menus and items to the object, using the startMenu() and addItem()

// commands. Each menu object MUST contain one menu named 'root', which is the first, always

// visible menu. All menus have the orientation, position, dimension, and default ItemStyle

// to use passed to them. If you specify them as numbers, the Left and Top positions are

// measured from the upper-left corner of the trigger item used to pop it out on the fly.

// Otherwise, if you specify them as strings (which may include formulae), they are measured

// from the top-left corner of the page. The first, 'root' menu is always positioned from the

// page corner as it has no parent menu. The syntax for this command is:

//

// startMenu('menu name', Vertical menu? (true/false), left, top, width, default ItemStyle

//  for items in this menu, optional parent frame/window or layer in which this menu resides);

//

// Something that needs explaining - the Vertical Menu setup, which is a 'true' or 'false' without

// quotes passed as the second parameter to startMenu(). Pass 'true' is you want that menu to

// be vertical, or 'false' to have a horizontal bar (like the root menu in this example).

//    The 'width' depends on the orientation of the menu -- for vertical menus it's the width,

// for horizontal menus it is the height. Basically, it's the constant dimension for all the items.

//    The parent window or layer parameter is optional, if not specified the current window is

// used -- this example does not use frames. See the FRAMESET README below if you're using them.

//

//

// Once you have defined a menu, you add items to that menu using the addItem() command.

// Items themselves must be passed 3 compulsory parameters -- the text to display in the

// item, the action or URL the item has when clicked, and the type of the action/target frame.

// All other parameters are optional -- you can override the menu's default ItemStyle with the

// item's own, and optionally override that was well by specifying a list of parameters in the

// same order as an ItemStyle. See the 'Reopen' menu below for an example of these extras...

//

// addItem('Text', 'URL', 'action type', optional ItemStyle, length, spacing, 'popout indicator',

//  popout indicator position....... in the same order as ItemStyles, see above);

//

// The 'action type' needs explaining. This tells the script what to do with the URL. You

// leave this a blank string '' to open the URL in the current window -- the default action.

// Or, you can set this to 'js:' to specify that the URL is a JavaScript function that gets

// executed when the item is clicked. Thirdly, you can pass a string containing a valid

// reference to a window/frame from the window/frameset in which this script is located,

// e.g. 'top.leftFrame' or 'parent.popupWin', to make the URL load in there when clicked --

// think of 'parent.main' as similar to <a target="main">.

//    Most importantly, you pass 'sm:' to specify that the URL is the name of a submenu to pop

// out when moused over. See the example below if this seems complicated, it's quite easy once

// you get the hang of it. Thanks to Martin J. Cole for originally suggesting the syntax!

//

// If you want more information, there's a FAQ (Frequently Asked Questions) section on my

// site: http://www.twinhelix.com, on the 'Popup Menus' page.







// A PopupMenu() object must be passed its own name so it can reference itself when the menu

// is active. We also use a 'with' block to work with its properties and functions below.

var pMenu = new PopupMenu('pMenu');

with (pMenu)

{



// *** MOVE OR CENTRE THE MENU HERE ***

// To centre it, or scroll with the window etc, just include a global variable or formula as one

// of the positions. This script includes my page object, which has several useful methods, namely

// 'page.winW()', 'page.winH()', 'page.scrollY()' and 'page.scrollX()'. These return the current

// dimensions of the visible window area and the scroll position of the window, which can be

// used to position menus however you want. Try replacing the first startMenu() below with one of:

//startMenu('root', false, 'page.winW()/2 - 120', 'page.scrollY()', 17, hBar); // Centres & floats.

//startMenu('root', false, 10, 0, 17, hBar, 'frameName'); // To create in subframe.



// The 'root' menu is horizontal, positioned at (x = 10, y = 0) and is 17px high, and items

// by default use the colours and dimensions in the 'hBar' ItemStyle defined above.

//startMenu('root', false, 95, 84, 19, hBar);

//startMenu('root', false, '125', 168, 5, hBar);

startMenu('root', false, 'page.winW()/2 - 100', 168, 5, hBar);









// The text is a space then 'File', and this item pops out the 'mFile' submenu when moused over

// as we've set 'sm:' as the action type. If you want to assign a click action (i.e. navigating to

// a file) to one of these 'sm:' items, see the 'Optional Code' section below.

addItem('Home', 'index2.htm', '', hBar, 65);

addItem('About Us ', 'aboutus.htm', '', hBar, 85);

addItem('Catering', 'mcatering', 'sm:', hBar, 75);

addItem('Menus', 'mmenus', 'sm:', hBar, 65);

addItem('Info Request', 'mrequests', 'sm:', hBar, 75);

// Next is an example of a Javascript function embedded in the menu, to open a new window...

// Also extra optional parameters at the end -- ItemStyle and longer length.

//addItem('&nbsp; Visit My Site', 'window.open("http://www.twinhelix.com")', 'js:', hBar, 80);

// To open a file in a frame named 'main' we would use the following syntax:

// addItem('Text', 'file.html', 'parent.main');



// This is a vertical menu positioned 0px across and 22px down from its trigger, and is 80px wide.

startMenu('mcatering', true, 0, 25, 175, subM);

// The URLs are set to # here, be sure to replace them with your path/file names or JS functions!

// Also note how all the types are '', indicating these links open in the current frame.

addItem('Corporate/Business Events', 'catering_corp.htm', '');
addItem('Social Events', 'catering_socialevents.htm', '');

// Notice we're popping out a submenu again here, so set 'sm:' as the action type...

//addItem('Reopen', 'mReopen', 'sm:');

//addItem('Exit', '#', '');


startMenu('mmenus', true, 0, 25, 100, subM);

addItem('Restaurant', 'menu_restaurant.htm', '');

addItem('Catering', 'menu_catering.htm', '');
addItem('Ala Carte', 'menu_alacarte.htm', '');





startMenu('mservices', true, 0, 25, 155, subM);

addItem('Entertainment', 'services_entertainment.htm', '');

addItem('Flowers, Balloons, Tents, etc.', 'services_flowers.htm', '');

addItem('Venues', 'services_venues.htm', '');

// Popout slightly left of its trigger, for fun...



startMenu('mrequests', true, 0, 25, 150, subM);

addItem('Ordering Information', 'requests_orderinginfo.htm', '');
addItem('FAQs', 'requests_faq.htm', '');
addItem('Directions', 'requests_directions.htm', '');
addItem('Contact Us', 'requests_information.htm', '');



// Instead of using spaces to indent, consider a special text stylesheet in an ItemStyle?

//addItem('&nbsp; &nbsp; Contents', '#', '');

//addItem('&nbsp; &nbsp; Index', '#', '');

// Here we add extra optional parameters to specify an individual popout indicator, positioned 3px

// from the left edge of this item,  along with the normal dimensions etc, instead of declaring a new

// ItemStyle especially for this item. You have to add all parameters up to the one you're specifying. 

//addItem('&nbsp; &nbsp; About', 'mAbout', 'sm:', subM, 22, 0, '&lt;', 3);



// This is across but not down... a horizontal popout.

//startMenu('mReopen', true, 85, 0, 120, crazy);

// Again these items have their own ItemStyles, and sometimes lengths and spacings specified.

//addItem('Recent Doc 1:<br>Schedule', '#', '', crazy, 35);

//addItem('Recent Doc 2:<br>Cunning Plan', '#', '', crazy, 35, 5);

// Ah, back to the normal blue ItemStyle for this item.

//addItem('Etc. etc...', '#', '', subM);



// Leftwards popout with a negative x and y relative to its trigger.

startMenu('mAbout', true, -85, -18, 80, subM);

addItem('Leftwards!<br>And up!', '#', '', subM, 40);





// You can also assign hide or show delays (in milliseconds) to the menus. Defaults are:

//showDelay = 0;

//hideDelay = 500;

// Specify hideDelay as zero if you want to disable autohiding, and showDelay as a couple of

// hundred if you don't want the menus showing instantaneously when moused over.



// End of 'with (menu Object)' block. That's one menu object created, now we have to activate it...



}





// You can create another menu object here if you want multiple menus on a page.

// Every menu object MUST have a menu named 'root' in it, as that's always visible.

// You can name the other menus in it anything you want.



//var anotherMenu = new PopupMenu('anotherMenu');

//with (anotherMenu)

//{

// startMenu('root', .....);

// ... make menus here ...

//}

// Then remember to add it to the event section below...











// *** (3) EVENTS ***

//

// In JavaScript, there are document 'events' you need to set so any scripts you are using

// are notified of things like page loading/clicking/scrolling. If you've got several menus

// or another JavaScript entirely in your page, you'll need to add all their functions in here.

// For another menu object, call its functions like update() and position() next to pMenu's.

//    The reason for these is that every time you set them, they override a previous setting.

// So make sure you collate all the functions that need to be called in here! Syntax:



//object.onevent = function()

//{

// function1();

// function2();

// ...

//}



// That's similar to: <BODY ONEVENT="function1(); function2(); function3()...">





// The most important event is one used to display the menu by calling one of several methods of

// any menu object(s) you have created. This is where you select the menu creation mode. 'Dynamic'

// mode inserts the menus into the document once it has finished loading and supports features

// like modifying the menu after creation. You create a 'Dynamic' mode menu by just calling the

// .update() method of a menu object like 'pMenu'.

//    'Fast' creation mode writes the menus to the document here and now, which is faster and

// more reliable in older browsers but doesn't allow those fancy tricks -- you do this by passing

// 'true' without quotes to the update function to signal that we're inline.

//    Opera only supports Fast mode and Netscape 4 is only reliable in Dynamic mode, so we use

// browser-detect code here. If you find some browser has troubles with one mode or another, try

// the other menu creation method -- see the "Cross-Browser" code at the very top of the <SCRIPT>

// tag for the variables used.



if (!isNS4)

{

 // Write menus now in non-NS4 browsers, by calling the "Fast" mode .update(true) method.

 pMenu.update(true);

 //anotherMenu.update(true);

}

else

{

 // For Netscape 4, back up the old onload function and make a new one to update our menus.

 // This is the regular "Dynamic" mode menu update, it works in IE and NS6 too.

 var popOldOL = window.onload;

 window.onload = function()

 {

  if (popOldOL) popOldOL();

  pMenu.update();

  //anotherMenu.update();

 }

}





// Other events must be assigned, these are less complicated, just add or remove menu objects.



window.onresize = function()

{

 ns4BugCheck();

 pMenu.position();

 //anotherMenu.position();

}



window.onscroll = function()

{

 pMenu.position();

 //anotherMenu.position();

}



if (isNS4) document.captureEvents(Event.CLICK);

document.onclick = function(evt)

{

 pMenu.click();

 //anotherMenu.click();

 if (isNS4) return document.routeEvent(evt);

}





// A small function that refreshes NS4 on window resize to avoid bugs, called above.

var nsWinW = window.innerWidth, nsWinH = window.innerHeight;

function ns4BugCheck()

{

 if (isNS4 && (nsWinW!=innerWidth || nsWinH!=innerHeight)) location.reload()

}



// Activate the useful 'onscroll' event for non-Microsoft browsers.

if (!isIE || window.opera)

{

 var nsPX=pageXOffset, nsPY=pageYOffset;

 setInterval('if (nsPX!=pageXOffset || nsPY!=pageYOffset) ' +

 '{ nsPX=pageXOffset; nsPY=pageYOffset; window.onscroll() }', 50);

}











// *** (4) ANIMATION ***

//

// Each menu object you create by default shows and hides its menus instantaneously.

// However you can override this behaviour with custom show/hide animation routines.

// I have included an example clipping animation below. Feel free to edit it, or delete

// this entire section if you don't like the animation to turn it off.

//   If you've created several menu objects, you must assign the animation functions to

// each of them to override the default if you want them all to animate. Also note that not

// all browsers can clip happily, such as Opera, so they don't have these functions assigned.



// This is the clipping animation function. Customisers: My lyr.clip() command gets passed the

// parameters (x1, y1, x2, y2) so you might want to adjust the direction etc. Oh, and I'm

// adding 2 to the dimensions to be safe due to different box models in some browsers.

// Another idea: add some if/thens to test for specific menu names...?

function menuClip(menuObj, menuName, dir)

{

 // The array index of the named menu (e.g. 'mFile') in the menu object (e.g. 'pMenu').

 var mD = menuObj.menu[menuName][0];

 // Add timer and counter variables to the menu data structure, we'll need them.

 if (!mD.timer) mD.timer = 0;

 if (!mD.counter) mD.counter = 0;

 with (mD)

 {

  // Stop any existing animation.

  clearTimeout(timer);

  // If the layer doesn't exist (cross-frame navigation) quit.

  if (!lyr || !lyr.ref) return;

  // Show the menu if that's what we're doing.

  if (dir==1) lyr.vis('visible');

  // Also raise showing layers above hiding ones.

  lyr.sty.zIndex = 1001 + dir;

  // Clip the visible area. Tweak this if you want to change direction/acceleration etc.

  lyr.clip(0, 0, menuW+2, (menuH+2)*Math.pow(Math.sin(Math.PI*counter/20),0.75) );

  // Increment the counter and if it hasn't reached the end (10 steps either way) set the timer.

  // Clear the clipping value in DOM browsers as early NS6 versions are quite terrible at this.

  counter += dir;

  if (counter==11) { counter = 10; if (isDOM&&!isIE) lyr.sty.clip='' }

  else if (counter<0) { counter = 0; lyr.vis('hidden') }

  else timer = setTimeout(menuObj.myName+'.'+(dir==1?'show':'hide')+'Menu("'+menuName+'")', 40);

 }

}





// Add the effect to the 'pMenu' menu object for supported browsers. Opera doesn't support clipping

// so we turn it off, neither does IE4/Mac.

if (!window.opera)

{

 pMenu.showMenu = new Function('mN','menuClip(pMenu, mN, 1)');

 pMenu.hideMenu = new Function('mN','menuClip(pMenu, mN, -1)');

 // Add it to other menu objects like this...

 //anotherMenu.showMenu = new Function('mN','menuClip(anotherMenu, mN, 1)');

 //anotherMenu.hideMenu = new Function('mN','menuClip(anotherMenu, mN, -1)');

}













// *** (5) FRAMESETS ***

//

// Non-frameset users can delete this block of comments if you want. Frameset users, this

// explains what extra code you need to get the menu script to cross over frames. Before you

// go any further, head back to my site and download the prebuilt frameset example from the

// FAQ on the Popup Menu page on my site (scroll down), it will save you a lot of tweaking.

//

// This menu supports frames with a few extensions. Firstly, this script must be located in the

// frameset file. The subframes you use must have all the needed CSS info from the <STYLE> tag

// included in them. I have also moved the above 'Events' section into the subframes along with

// some extra code. I've set up the frameset example using JS and CSS files, so load that up now.

//

// With the SUBFR.JS file, all you have to do is make sure that in the first line pMenu points to

// the correct pMenu -- that is, located within that frame's parent (this script). If you're using

// multiple menu objects across frames, set them up there in the subframe Events lines similar to

// the way I indicated in the comments above in this script. If you're nesting one frameset within

// another, panic, then alter 'parent' to 'top' or similar, or hire me to do the project :).

//

// This file also allows the menus in sub-frames scroll with their windows. All you have to do is

// use the page object in that frame in a formula for the positions of a menu, e.g. for a menu in

// a frame named 'xyz', we would set it to appear in that frame and appear near the top and 100px

// from the left:

//

// startMenu('menuName', false, 'xyz.page.scrollX()+100', 'xyz.page.scrollY()+10', 17, hBar, 'xyz');

//

// Of course, third-level menus in other frames can be positioned relative to their parents

// normally. (Remember: strings as positions mean 'absolute' and are calculated as formulae,

// numbers as positions mean 'relative', offset from its parent).

//    Finally, you'll want to specify target frames for each menu item, in the same fashion as

// you specified them for the menus themselves -- by default URLs will open in the window in

// which the script is located, the topmost frameset.











// *** (6) OPTIONAL CODE ***   DELETE IF YOU'RE NOT USING THESE!

//

// If you want, you can assign functions to handle mouse events like mouse over/out/click.

// You'll want to use these for assigning click actions to 'sm:' items or status messages etc.

// 'with (this)' means use the properties of the menu object, like overM and overI which

// are the current menu name and item number.

// To uncomment and activate, delete the /* and */ at the start and end.



/*

pMenu.onclick = function() { with (this)

{

 // Do actions depending on the item that the mouse was over at the time of the click.

 // You may with to use nested IFs or 'switch' statements etc. if you're familiar with JS.

 if (overM == 'root' && overI == 1) status = 'Congratulations, you\'ve mastered clicking!';

 if (overM == 'root' && overI == 2) location.href = 'edit.html';

}}



// Set the status message to the URL if the 'action type' is nothing, and clear on mouseout.

pMenu.onmouseover = function() { with (this)

{

 // By now, you either have my JS Object Browser script from my site or you need it... try

 // embedding in an IFrame and typing 'pMenu' into its Go To field to see the menu internals.

 with (menu[overM][overI]) if (!type) status = href;

}}

pMenu.onmouseout = function() { status = '' }

*/







// This illustrates changing the contents of the menu -- delete this, it's unnecessary...

// This DOES NOT WORK in Opera yet (as of v6.00 at time of writing) by the way.

function changeMenu() { with (pMenu)

{

 // If your modifications are quite extensive, probably hide the menu before commencing

 // them, as the script relies on the menu array in realtime to handle highlighting etc.

 //over('root', 0);

 //menu.root[0].lyr.vis('hidden');



 // Create a whole new menu...

 startMenu('mNewMenu', true, 0, 22, 130, subM);

 addItem('<b>TwinHelix Designs:</b><br>Extreme DHTML.<br>Small Code.<br>Click to Visit...',

  'window.open("http://www.twinhelix.com")', 'js:', subM, 70);



 // Alter just the 'Visit My Site' menu item to pop it out... setting nextItem tells the

 // addItem() command which item number we are up to in the sequence.

 actMenu = 'root';

 nextItem = 4;

 addItem('&nbsp; Dynamism...', 'mNewMenu', 'sm:', hBar, 80);



 // Call the update function to implement our changes.

 update();

}}





// This is just the moving command called when you click the feature list.

function moveRoot()

{

 with (pMenu.menu.root[0].lyr) x( (x()<100) ? 100 : 10);

}