Explanation of exmplmenu_var.js file.

At first a description of the general layout of the file, followed by a more detailed description of every variable and the array structure.

The red colored items belong the the Javascript syntax and are case sensitive and critical. Var will generate an error, so will VAR.
The quotation marks are also needed, even when a text variable is left blank the quotation marks are needed. (An empty text string is not the same as no string)
The black colored items belong to the menu script and must not be changed or deleted.
The blue items can be changed and control the behavior and appearance of the menus.
var NoOffFirstLineMenus=5;
var LowBgColor="red";
var HighBgColor="lightblue";
var FontLowColor="yellow";
var FontHighColor="blue";
var BorderColor="yellow";
var BorderWidth=1;
var BorderBtwnElmnts=1;
var FontFamily="comic sans ms,technical,arial";
var FontSize=9;
var FontBold=1;
var FontItalic=0;
var MenuTextCentered=1;
var MenuCentered="center";
var MenuVerticalCentered="center";
var ChildOverlap=.1;
var ChildVerticalOverlap=.1;
var LeftPadding=2;
var TopPadding=2;
var StartTop=0;
var StartLeft=200;
var VerCorrect=0;
var HorCorrect=0;
var FirstLineHorizontal=0;
var MenuFramesVertical=1;
var DissapearDelay=1000;
var TakeOverBgColor=1;
var FirstLineFrame="MyFrameOne";
var SecLineFrame="MyFrameTwo";
var DocTargetFrame="MyFrameTwo";
var HideTop=0;
var TargetLoc="";
var MenuWrap=1;
var RightToLeft=0;
var UnfoldsOnClick=0;
var WebMasterCheck=0;
var ShowArrow=1;
var KeepHilite=1;
var Arrws=["tri.gif",5,10,"tridown.gif",10,5,"trileft.gif",5,10];
function BeforeStart(){;}
function AfterBuild(){;}
function BeforeFirstOpen(){;}
function AfterCloseAll(){;}
	Menu1=new Array("Example 1","file.htm","",1,20,85,"","","","","");
		Menu1_1=new Array("Example 1.1","","",0,20,120,"","","","","");
	Menu2=new Array("Example 2","file.htm","",2,0,0,"","","","","");
		Menu2_1=new Array("Example 2.1","file.htm","",3,20,190,"","","","","");	
			Menu2_1_1=new Array("Example 2.1.1","file.htm","",1,20,,200,"","","","","");
				Menu2_1_1_1=new Array("<img src='busts.jpg'>","file.htm","",0,128,128,"","","","","");
			Menu2_1_2=new Array("Example 2.1.2","file.htm","",0,0,0,"","","","","");
			Menu2_1_3=new Array("Example 2.1.3","file.htm","",0,0,0,"","","","","");
		Menu2_2=new Array("Example 2.2","file.htm","",8,0,0,"","","","","");
			Menu2_2_1=new Array("Example 2.2.1","file.htm","",0,20,200,"","","","","");
			Menu2_2_2=new Array("Example 2.2.2","file.htm","",0,0,0,"","","","","");
			Menu2_2_3=new Array("Example 2.2.3","file.htm","",0,0,0,"","","","","");
			Menu2_2_4=new Array("Example 2.2.4","file.htm","",0,0,0,"","","","","");
			Menu2_2_5=new Array("Example 2.2.5","file.htm","",1,0,0,"","","","","");
				Menu2_2_5_1=new Array("Example 2.2.5.1","file.htm","",1,32,150,"","","","","");
					Menu2_2_5_1_1=new Array("Example 2.2.5.1.1","file.htm","",1,20,90,"","","","","");
						Menu2_2_5_1_1_1=new Array("Example 2.2.5.1.1.1","file.htm","",0,22,400,"","","","","");
			Menu2_2_6=new Array("Example 2.2.6","file.htm","",0,0,0,"","","","","");
			Menu2_2_7=new Array("Example 2.2.7","file.htm","",0,0,0,"","","","","");
			Menu2_2_8=new Array("Example 2.2.8","file.htm","",0,0,0,"","","","","");
	Menu3=new Array("Example 3","file.htm","",0,0,0,"","","","","");
	Menu4=new Array("Example 4","file.htm","",0,0,0,"","","","","");
	Menu5=new Array("Example 5","javascript:top.location.href='file.htm'","",2,0,0,"","","","","");
		Menu5_1=new Array("Example 5.1","file.htm","",0,20,140,"","","","","");
		Menu5_2=new Array("Example 5.2 ","file.htm","",0,0,0,"","","","","");

The variables

NoOffFirstLineMenus
number- The number of elements in the first row or colom of your menu.
 
LowBgColor
Text string- Background color of the elements when the mouse is not over the element.
Can be a supported color name like red or blue or a RGB string like #ff552a.
Can be over ruled by the variable in the menu tree
 
HighBgColor
Text string- Background color of the elements when the mouse is over the element.
Can be a supported color name like red or blue or a RGB string like #ff552a.
Can be over ruled by the variable in the menu tree
 
FontLowColor
Text string- Font color when the mouse is not over the element.
Can be a supported color name like red or blue or a RGB string like #ff552a.
Can be over ruled by the variable in the menu tree
 
FontHighColor
Text string- Font color when the mouse is over the element.
Can be a supported color name like red or blue or a RGB string like #ff552a.
Can be over ruled by the variable in the menu tree
 
BorderColor
Text string- Border color.
Can be a supported color name like red or blue or a RGB string like #ff552a.
Can be over ruled by the variable in the menu tree
 
BorderWidth
Number- Thickness of the border around the elements in pixels.
 
BorderBtwnElmnts
Number 1 or 0- Controls if there is a border between the elements. 0 is no border between the elements.
 
FontFamily
Text string- More than one font can be declared seperated with a comma.
Example: arial, times new roman, ms comic sans. The browser will use the first font found on the users system.
 
FontSize
Number- Size of the font in pt.
 
FontBold
Number 1 or 0- 1 makes the font weight bold; 0 makes the font weight normal.
 
FontItalic
Number 1 or 0- 1 makes the font italic; 0 makes the font normal.
 
MenuTextCentered
Text string- Can be 'left', 'center' or 'right'.
 
MenuCentered
Text string- Can be 'left', 'center', 'right', justify or ''. StartLeft is added to the calculated position. '' is the same as 'left'.
 
MenuVerticalCentered
Text string- Can be 'top', 'middle', 'bottom' or ''. StartTop is added to the calculated position. '' is the same as 'top'.
 
ChildOverlap
Number between 0 and 1- Controls what part of a level is covered with it's sublevel.
With a value of .25 a level will covered be for 25% by it's sublevel. Negative values are possible, but not very usefull.
 
ChildVerticalOverlap
Number between 0 and 1- Controls the vertical offset of a sublevel from it's parent level.
With a value of .25 a sublevel will start 25% of the parents level height lower. Negative values will make the start higher.
Example overlap
LeftPadding
Number- Defines the distance between the left side of the menu text and the border of the element.
 
TopPadding
Number- Defines the distance between the top side of the menu text and the border of the element.
 
StartTop
Number- Defines the vertical position of the menu in the document.
Is ignored whenMenuVerticalCentered is 1. Is also ignored when the menu is across frames and the frames are orientated in rows. The menu is in that case placed at the bottom of the frame FirstLineFrame.
 
StartLeft
Number- Defines the horizontal position of the menu in the document.
Is ignored whenMenuCentered is 1. Is also ignored when the menu is across frames and the frames are orientated in coloms. The menu is in that case placed at the far right position the frame FirstLineFrame.
 
VerCorrect
Number- Defines the vertical correction of the seconde line of the menu in the document.
Can be usefull in situations with nested frames
 
HorCorrect
Number- Defines the horizontal correction of the second line of the menu in the document.
Can be usefull in situations with nested frames
 
FirstLineHorizontal
Number 1 or 0- When set to 1 the elements of the first level are placed horizontal next to each other.
When set to 0 these elements are placed vertical below each other.
 
MenuFramesVertical
Number 1 or 0- Set this variable to 1 when your frameset is laid out in coloms.
set to 0 when your frameset is in rows. Irrelevant when the menu is on a single page or frame, but must be 0 or1
 
DissapearDelay
Number- The time in milliseconds the menu's sublevels stay visible after the mouse is no longer over the menu.
 
TakeOverBgColor
Number 1 or 0- When set to 1 the background color of the frame where the menu's first line is in will become the same as the frame where the sublevels are in.
Irrelevant when the menu is on a single page or frame, but must be 0 or1
 
FirstLineFrame
Text string- When the menus are used in a frameset this is the name of the frame where the first line of your menu is located. (see creating the frameset).
When the menu is used in a single page, this must be 'self'
 
SecLineFrame
Text string- When the menus are used in a frameset this is the name of the frame where the sub levels of your menu are located. (see creating the frameset).
It is allowed to have SecLineFrame equal to FirstLineFrame
When the menu is used in a single page, this must be 'self'
 
DocTargetFrame
Text string- When the menus are used in a frameset this is the name of the frame where the documents are loaded. (see creating the frameset).
Normally this will be equal to SecLineFrame
When the menu is used in a single page, this must be 'self'
 
HideTop
Number 1 or 0- Only relevant when the menu is used in a frameset. When set to 1 the top level items are hidden when a new document is loaded into the target frame until the menu is built again.
 
MenuWrap
Number 1 or 0- When set to 1 unfolding items are wrapped when the menu doesn't fit on the window.
 
RightToLeft
Number 1 or 0- When set to 1 the menu unfolds from left to right.
 
TargetLoc
Text string- Enables relative positioning of the menu.
1- In the HTML-file where the menu shows you need a named div:
<div id='MenuPos' style='position:relative'></div>
2- Set TargetLoc to 'MenuPos'
3 - Set MenuCentered to 'left', MenuVerticalCentered to 'top' and StartTop and StartLeft to 0
4 - StartTop, StartLeft and the Menu center variables can still be used to get an offset from the <div>.
 
Remarks: the different ways browsers interpret the pageX and pageY offset makes this feature difficult. I got the best results by putting the div inside a table, give the div the same dimensions as the first level menu, put an transparent image inside the div with again the same dimensions as the first level menu
<table>
  <tr><td>
    <div id='MenuPos' style='position:relative; width:102; height:102;'><img src='transparent.gif' width='102' height='102'></div>
  </td></tr>
</table>
 
UnfoldsOnClick
Number 1 or 0- When set to 1 the menu unfolds onclick, when set to 0 the menu unfolds on mouse over.
 
WebMasterCheck
Number 1 or 0- When set to 1 the script performs a check on the frame names and the menu tree. When your menu is running this should be set to 0.
 
ShowArrow
Number 1 or 0- When set to 1 the arrow gifs show.
 
KeepHilite
Number 1 or 0- When set to 1 the selected path stays highligthed.
 
Arrws
array- Describes the three images used as arrows.
Format: source, width, height
 
BeforeStart
function- Is called just before the menu is build. Is by default empty. Can be used by user.
 
AfterBuild
function- Is called just after the menu is build. Is by default empty. Can be used by user.
 
BeforeFirstOpen
function- Is called when the mouse enters a main menu item that has children. Is by default empty. Can be used by user.
 
AfterCloseAll
function- Is called when the mouse leaves the menu. Is by default empty. Can be used by user.
 

The menu tree

All element names start with Menu

The first element on the first level is called Menu1.
The second element on the first level is called Menu2.
The third element on the first level is called Menu3 ,etc.
If Menu1 has sub elements, the first of those is called Menu1_1, the second Menu1_2, etc.
If Menu1_2has sub elements, the first of those is called Menu1_2_1, the second Menu1_2_2, etc.

The menu tree will look something like:

Menu1 					the first element of the first level
	Menu1_1				the first sub element of Menu1
	Menu1_2				the second sub element of Menu1
		Menu1_2_1			the first sub element of Menu1_2
		Menu1_2_2			the second sub element of Menu1_2
	Menu1_3				the third sub element of Menu1
		Menu1_3_1			the first sub element of Menu1_3
			Menu1_3_1_1	the first sub element of Menu1_3_1
			Menu1_3_1_2	the second sub element of Menu1_3_1
Menu2					the second element of the first level
Menu3					the third element of the first level
	Menu3_1				the first sub element of Menu3
		Menu3_1_1			the first sub element of Menu3_1
	Menu3_2				the third sub element of Menu3
There can be as much elements and sublevels as you need.
The order nor the layout of the menu tree is important. You could also build a tree like this:

Menu1_3_1_2
Menu3
Menu1
Menu2
Menu1_3_1_1
Menu1_1
Menu3_1_1
Menu1_2
Menu1_2_1
Menu1_2_2
Menu1_3
Menu1_3_1
Menu3_1
Menu3_2

The variables of the menu tree

Menu1=new Array("TextToShow","Link","BgImage",NoOfSubs,Height,Width,BgColor,BgHiColor,FontColor,FontHiColor,BorderColor);
    Menu1_1=new Array("TextToShow","Link","BgImage",NoOfSubs,Height,Width,BgColor,BgHiColor,FontColor,FontHiColor,BorderColor);
    Menu1_2=new Array("TextToShow","Link","BgImage",NoOfSubs,Height,Width,BgColor,BgHiColor,FontColor,FontHiColor,BorderColor);
        Menu1_2_1=new Array("TextToShow","Link","BgImage",NoOfSubs,Height,Width,BgColor,BgHiColor,FontColor,FontHiColor,BorderColor);
        Menu1_2_2=new Array("TextToShow","Link","BgImage",NoOfSubs,Height,Width,BgColor,BgHiColor,FontColor,FontHiColor,BorderColor);
    Menu1_3=new Array("TextToShow","Link","BgImage",NoOfSubs,Height,Width,BgColor,BgHiColor,FontColor,FontHiColor,BorderColor);
        Menu1_3_1=new Array("TextToShow","Link","BgImage",NoOfSubs,Height,Width,BgColor,BgHiColor,FontColor,FontHiColor,BorderColor);
            Menu1_3_1_1=new Array("TextToShow","Link","BgImage",NoOfSubs,Height,Width,BgColor,BgHiColor,FontColor,FontHiColor,BorderColor);
            Menu1_3_1_2=new Array("TextToShow","Link","BgImage",NoOfSubs,Height,Width,BgColor,BgHiColor,FontColor,FontHiColor,BorderColor);
Menu2=new Array("TextToShow","Link","BgImage",NoOfSubs,Height,Width,BgColor,BgHiColor,FontColor,FontHiColor,BorderColor);
Menu3=new Array("TextToShow","Link","BgImage",NoOfSubs,Height,Width,BgColor,BgHiColor,FontColor,FontHiColor,BorderColor);
    Menu3_1=new Array("TextToShow","Link","BgImage",NoOfSubs,Height,Width,BgColor,BgHiColor,FontColor,FontHiColor,BorderColor);
        Menu3_1_1=new Array("TextToShow","Link","BgImage",NoOfSubs,Height,Width,BgColor,BgHiColor,FontColor,FontHiColor,BorderColor);
    Menu3_2=new Array("TextToShow","Link","BgImage",NoOfSubs,Height,Width,BgColor,BgHiColor,FontColor,FontHiColor,BorderColor);
TextToShow
Text string- What you want to show in the element. It can be text, an image or html
To show an image it must look like "<img src='MyImage'>"
To use roll over images use "rollover:MyImage1:MyImage2"
To leave this field blank use ""
 
Link
Text string- Where you want to go when you click the element.
Looks like "MyLink"
Can also be used to execute javascript statements. For instance when you want the link to open in the top window use "javascript:top.document.location.href='Link.htm';"
You can in fact start a whole script when the element is clicked with the help of javascript:. "javascript:{your script; another function;}"
 
BgImage
Text string- background image for the element. Is not supported for NS4 when the menu is across frames.
I had to disable this for NS4 in frame setup because I could not get it to work properly. (Everybody who wants to try and find a solution for this is very welcom. Enable in menu_com.js)
 
NoOfSubs
Number- The number of sub elements of this element in the next level.
 
Height
Number- The pixelheight of the element.
Must have a value for each element that ends with 1 (Menu1, Menu5_3_1) In all other elements this may be 0.
Elements in a vertical column may have different heights, all elements in a horizontal row get the height of the first element in that row
 
Width
Number- The pixelwidth of the element.
Must have a value for each element that ends with 1 (Menu1, Menu5_3_1) In all other elements this may be 0.
Elements in a horizontal row may have different widths, all elements in a vertical column get the width of the first element in that column
 
BgColor
Text string- Background color of this element when the mouse is not over the element.
When used it over rules the global variable LowBgColor
When not used it must be "". Can be a supported color name like red or blue or a RGB string like #ff552a.
 
BgHiColor
Text string- Background color of this element when the mouse is over the element.
When used it over rules the global variable HighBgColor
When not used it must be "". Can be a supported color name like red or blue or a RGB string like #ff552a.
 
FontColor
Text string- Font color of this element when the mouse is not over the element.
When used it over rules the global variable LowFontColor
When not used it must be "". Can be a supported color name like red or blue or a RGB string like #ff552a.
 
FontHiColor
Text string- Font color of this element when the mouse is over the element.
When used it over rules the global variable HighFontColor
When not used it must be "". Can be a supported color name like red or blue or a RGB string like #ff552a.
 
BorderColor
Text string- Border color of this group of elements.
Only the color of elements ending on 1 are used.
When used it over rules the global variable BorderColor
When not used it must be "". Can be a supported color name like red or blue or a RGB string like #ff552a.