Explanation of exmplmenu_var.js file. At first we will discuss the general layout of the file and later we go into more detail for 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 WebMasterCheck=0; 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); 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("","file.htm",0,128,128); Menu2_1_2=new Array("Example 2.1.2","file.htm",0); Menu2_1_3=new Array("Example 2.1.3","file.htm",0); Menu2_2=new Array("Example 2.2","file.htm",8); 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); Menu2_2_3=new Array("Example 2.2.3","file.htm",0); Menu2_2_4=new Array("Example 2.2.4","file.htm",0); Menu2_2_5=new Array("Example 2.2.5","file.htm",1); 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); Menu2_2_7=new Array("Example 2.2.7","file.htm",0); Menu2_2_8=new Array("Example 2.2.8","file.htm",0); Menu3=new Array("Example 3","file.htm",0); Menu4=new Array("Example 4","file.htm",0); Menu5=new Array("Example 5","javascript:top.location.href='file.htm'",2); Menu5_1=new Array("Example 5.1","file.htm",0,20,140); Menu5_2=new Array("Example 5.2 ","file.htm",0); The variables NoOffFirstLineMenus number- The number of elements in the first row or colom of your menu. LowBgColor Text string- Background 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. HighBgColor Text string- Background color when the mouse is over the element. Can be a supported color name like red or blue or a RGB string like #ff552a. 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. 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. BorderColor Text string- Color of the border around the elements. Can be a supported color name like red or blue or a RGB string like #ff552a. 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 Number 1 or 0- 1 centers the element text; 0 alignes the element text left. MenuCentered Text string- Can be 'left', 'center', 'right' 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' 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. 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 Each element must have a text to show, a link to link to and the number of sub elements in the next level. On top of that each element starting a new level (that is each element with it's name ending on 1) must also have the element width and element height in it's array. For the above menu that would mean: Menu1=new Array("text to show","Link to link to",No of sub elements,element height,element width); Menu1_1=new Array("text to show","Link to link to",No of sub elements,element height,element width); Menu1_2=new Array("text to show","Link to link to",No of sub elements); Menu1_2_1=new Array("text to show","Link to link to",No of sub elements,element height,element width); Menu1_2_2=new Array("text to show","Link to link to",No of sub elements); Menu1_3=new Array("text to show","Link to link to",No of sub elements); Menu1_3_1=new Array("text to show","Link to link to",No of sub elements,element height,element width); Menu1_3_1_1=new Array("text to show","Link to link to",No of sub elements,element height,element width); Menu1_3_1_2=new Array("text to show","Link to link to",No of sub elements); Menu2=new Array("text to show","Link to link to",No of sub elements); Menu3=new Array("text to show","Link to link to",No of sub elements); Menu3_1=new Array("text to show","Link to link to",No of sub elements,element height,element width); Menu3_1_1=new Array("text to show","Link to link to",No of sub elements,element height,element width); Menu3_2=new Array("text to show","Link to link to",No of sub elements); Elements that doesn't need element height and element width, may have them, but they won't be used. Text to show Text string- What you want to show in the element. It can be text, an image or infact any part of a html document including tags To show an image it must look like "" Link to link to Text string- Where you want to go when you click the element. Looks like "MyLink" When you want to link to an URL outside your own pages it must be "javascript:top.document.location.href='OutsideLink';" In fact with the help of javascript: you can start a whole script when the element is clicked. "javascript:{your script; another function;}" No of sub elements Number- The number of sub elements of this element in the next level. Element height Number- The pixelheight of the element. Element width Number- The pixelwidth of the element.