/*
Menus
Mark Simon, Comparity Training
http://widgets.comparity.net
Feel Free to use
This script creates displays and manages dropdown or ribbon menus.
To use:
1. Copy the menu.js file somewhere
2. Head Section:
3. Create the following hierarchical structure:
That is:
(a) You have a ul called "menu"
(b) The ul contains a set of nested lists.
The id of your list above defaults to "menu".
The class of your open menus defaults to "open".
The type may be "menu" or "ribbon"; it defaults to "menu".
The variables at the beginning of the function can be set
by you. They are mostly colours, but the last is the width
of a ribbon (defaults to 640-2 px);
Unobtrusive JavaScript
Unobtrusive JavaScript refers to JavaScript which is in no way
embedded in your HTML code. The script resides entirely in external
files.
Naturally, your HTML will need to link to the code. In the sample Pages,
there is a reference to an external file:
You would possibly have several links to external files. Most of these
would be links to libraries of code, such as these widgets.
Generally, you would also have a link to a JavaScript file which
contains your miscellaneous code, and, in particular, your startup
code.
This linked script might include some startup code such as:
window.onload=function() {
// new menu(menuID,openStyle,type);
new menu('menu','open','menu');
// Other startup code
}
In these examples the startup has been included in the main HTML
file for simplicity.
Disclaimer:
This script probably works and it does what it does.
What it doesn’t do it doesn’t do. E & OE
Widgets
The aim of these widgets is to provide functionality with as little
imposition on the HTML as possible.
The widgets use unobtrusive JavaScript and CSS. JavaScript is also used
to iron out the differences between browsers.
Generally speaking, the widgets work on basic structures;
if JavaScript is disabled, the structures will appear in their
default formats.
Doctype
If you haven't already done so, you should start your page with
a Doctype. This will encourage most browsers to behave themselves.
You will get the best restults if you use XHTML Strict:
*/
function menu(menuID,openStyle,type,width,colours) {
colours=colours||Array();
// The following may be set (carefully)
var MainBackground= colours['MainBackground'] || '#BFDBFF';
var MainBorder= colours['MainBorder'] || '#A2B3CF';
var MainHover= colours['MainHover'] || '#DFD5B1';
var SecondaryBackground= colours['SecondaryBackground'] || '#D7E3F2';
var SecondaryHover= colours['SecondaryHover'] || '#FFD44D';
var Text= colours['Text'] || '#15428B';
// The following does the work
menuID=menuID?menuID:'menu';
openStyle=openStyle?openStyle:'open';
if(!type||(type!='ribbon'&&type!='vertical')) type='horizontal';
if(type=='vertical') {
width=parseInt(width);
var marginLeft=width+40;
var liOffset=width+20;
}
var ululleft='8px';
var ulultop='6px';
// Adjust for old IE
/*@cc_on
@if(@_jscript_version<5.8)
ululleft='10px';
ulultop='21px';
@end
@*/
var tabs=new Array();
var menu=document.getElementById(menuID);
var li=menu.getElementsByTagName('li');
li=menu.childNodes;
var openTab=getCookies('tab');
if(!openTab) openTab=0;
for(var i=0,j=0;i