Installing menus 13.10
Versions 10 and upward no longer support Netscape 4.xx and MS IE 4.xx
Using Doctype
This version is especially designed for the use of Doctypes that will switch MS IE6+/WIN and MS IE5+/MAC into standard compliant mode. Doctypes like that look like:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Because of MS IE5+/Mac a compliant doctype must be used with this version of Menu.
When you need to use another doctype not including a name space use version 9.11 of the menu.
Menus in a single page or single frame
When the script loader, the main menu and the sub menus are all located in the same frame, the installation and configuration is the same as when the menu is used in a single page setup.
Top of page
Menus in a frameset
Create the frameset
-
It does not matter how many frames you use. The menu recognizes a maximum of 3 frames. The others are not relevant to the script. The recognized frames are for the location of the main menu, the sub menus and the target documents. (The menu can target more frames by using javascript as link). Those 3 frames may be different frames or the same frame or a combination.
The most usual setup is with two frames: one frame for the main menu and another frame that gets both the sub menus and target documents.
Another possible setup is to have both main and sub menus in one frame and the target in another.
The script itself can be in any frame, but will normally be in the frame that holds the main menu.
Another setup is to load the script into an invisible frame and have the whole menu and target in a visible frame. For the visitor it looks like you don't use frames, but is has the advantage of a frameset that the script needs to be loaded only once.
Frames that are used by the script must be named: <frame name=".....................
Create frameset with columns
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Your Title</title>
</head>
<frameset cols="150,*" framespacing='0' frameborder='0' border=0>
<frame frameborder='0' framespacing='0' src="MyNavigation.htm" noresize scrolling='no' name="MyFrameOne"></frame>
<frame frameborder='0' framespacing='0' src="MyMain.htm" name="MyFrameTwo"></frame>
</frameset>
</html>
Relevant variables:
var MenuUsesFrames=1;
var MenuFramesVertical=1;
var FirstLineFrame="MyFrameOne";
var SecLineFrame="MyFrameTwo";
var DocTargetFrame="MyFrameTwo";
Create frameset with rows
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Your Title</title>
</head>
<frameset rows="150,*" framespacing='0' frameborder='0' border=0>
<frame frameborder='0' framespacing='0' src="MyNavigation.htm" noresize scrolling='no' name="MyFrameOne"></frame>
<frame frameborder='0' framespacing='0' src="MyMain.htm" name="MyFrameTwo"></frame>
</frameset>
</html>
Relevant variables:
var MenuUsesFrames=1;
var MenuFramesVertical=0;
var FirstLineFrame="MyFrameOne";
var SecLineFrame="MyFrameTwo";
var DocTargetFrame="MyFrameTwo";
Create frameset with hidden frame
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Your Title</title>
</head>
<frameset rows="*,100%" framespacing='0' frameborder='0' border=0>
<frame frameborder='0' framespacing='0' src="MyNavigation.htm" noresize scrolling='no' name="MyFrameOne"></frame>
<frame frameborder='0' framespacing='0' src="MyMain.htm" name="MyFrameTwo"></frame>
</frameset>
</html>
Relevant variables:
var MenuUsesFrames=1;
var MenuFramesVertical=0;
var FirstLineFrame="MyFrameTwo";
var SecLineFrame="MyFrameTwo";
var DocTargetFrame="MyFrameTwo";
In the above examples the script loader goes into MyNavigation.htm.
Insert the script loader code into your HTML file
!! Insert the code just before the </body> tag in your HTML file !!
To prevent typing errors you can copy and paste the code into your page.
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
- <head>
- your header html
- </head>
- <body>
- your html
- <script type='text/javascript'>function Go(){return}</script>
- <script type='text/javascript' src='exmplsingle_var.js'></script> (examplframes_var.js when used in frames)
- <script type='text/javascript' src='menu8_com.js'></script>
- </body>
- </html>
Modify (or Create) the variable file
The easiest way to make your own variable file is to use and modify the 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 printed 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 BorderWidthMain=1;
- var BorderWidthSub=1;
- var BorderBtwnMain=1;
- var BorderBtwnSub=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 StartTop=0;
- var StartLeft=200;
- var VerCorrect=0;
- var HorCorrect=0;
- var LeftPadding=2;
- var TopPadding=2;
- var FirstLineHorizontal=0;
- var MenuFramesVertical=1;
- var DissapearDelay=1000;
- var UnfoldDelay=100;
- var TakeOverBgColor=1;
- var FirstLineFrame="MyFrameOne";
- var SecLineFrame="MyFrameTwo";
- var DocTargetFrame="MyFrameTwo";
- var TargetLoc="";
- var MenuWrap=1;
- var RightToLeft=0;
- var BottomUp=0;
- var UnfoldsOnClick=0;
- var BaseHref="";
- var Arrws=["tri.gif", 5,10,"tridown.gif", 10,5,"trileft.gif", 5,10];
- var MenuUsesFrames=1;
- var RememberStatus=0;
- var BuildOnDemand=1;
- var BgImgLeftOffset=5;
- var ScaleMenu=0;
-
- var HooverBold=0;
- var HooverItalic=0;
- var HooverUnderLine=0;
- var HooverTextSize=0;
- var HooverVariant=0;
-
- var MenuSlide="";
- var MenuSlide="progid:DXImageTransform.Microsoft.RevealTrans(duration=.5, transition=19)";
- var MenuSlide="progid:DXImageTransform.Microsoft.GradientWipe(duration=.5, wipeStyle=1)";
-
- var MenuShadow=""
- var MenuShadow="progid:DXImageTransform.Microsoft.DropShadow(color=#888888, offX=2, offY=2, positive=1)";
- var MenuShadow="progid:DXImageTransform.Microsoft.Shadow(color=#888888, direction=135, strength=3)";
-
- var MenuOpacity=""
- var MenuOpacity="progid:DXImageTransform.Microsoft.Alpha(opacity=75)";
-
- function BeforeStart(){return}
- function AfterBuild(){return}
- function BeforeFirstOpen(){return}
- function AfterCloseAll(){return}
- Menu1=new Array("Example 1","file.htm","",1,20,85,"","","","","","",-1,-1,-1,"","");
- Menu1_1=new Array("Example 1.1","","",0,20,120,"","","","","","",-1,-1,-1,"","");
- Menu2=new Array("Example 2","file.htm","",2,0,0,"","","","","","",-1,-1,-1,"","");
- Menu2_1=new Array("Example 2.1","file.htm","",3,20,190,"","","","","","",-1,-1,-1,"","");
- Menu2_1_1=new Array("Example 2.1.1","file.htm","",1,20,,200,"","","","","","",-1,-1,-1,"","");
- Menu2_1_1_1=new Array("<img src='busts.jpg'>","file.htm","",0,128,128,"","","","","","",-1,-1,-1,"","");
- Menu2_1_2=new Array("Example 2.1.2","file.htm","",0,0,0,"","","","","","",-1,-1,-1,"","");
- Menu2_1_3=new Array("Example 2.1.3","file.htm","",0,0,0,"","","","","","",-1,-1,-1,"","");
- Menu2_2=new Array("Example 2.2","file.htm","",8,0,0,"","","","","","",-1,-1,-1,"","");
- Menu2_2_1=new Array("Example 2.2.1","file.htm","",0,20,200,"","","","","","",-1,-1,-1,"","");
- Menu2_2_2=new Array("Example 2.2.2","file.htm","",0,0,0,"","","","","","",-1,-1,-1,"","");
- Menu2_2_3=new Array("Example 2.2.3","file.htm","",0,0,0,"","","","","","",-1,-1,-1,"","");
- Menu2_2_4=new Array("Example 2.2.4","file.htm","",0,0,0,"","","","","","",-1,-1,-1,"","");
- Menu2_2_5=new Array("Example 2.2.5","file.htm","",1,0,0,"","","","","","",-1,-1,-1,"","");
- Menu2_2_5_1=new Array("Example 2.2.5.1","file.htm","",1,32,150,"","","","","","",-1,-1,-1,"","");
- Menu2_2_5_1_1=new Array("Example 2.2.5.1.1","file.htm","",1,20,90,"","","","","","",-1,-1,-1,"","");
- Menu2_2_5_1_1_1=new Array("Example 2.2.5.1.1.1","file.htm","",0,22,400,"","","","","","",-1,-1,-1,"","");
- Menu2_2_6=new Array("Example 2.2.6","file.htm","",0,0,0,"","","","","","",-1,-1,-1,"","");
- Menu2_2_7=new Array("Example 2.2.7","file.htm","",0,0,0,"","","","","","",-1,-1,-1,"","");
- Menu2_2_8=new Array("Example 2.2.8","file.htm","",0,0,0,"","","","","","",-1,-1,-1,"","");
- Menu3=new Array("Example 3","file.htm","",0,0,0,"","","","","","",-1,-1,-1,"","");
- Menu4=new Array("Example 4","file.htm","",0,0,0,"","","","","","",-1,-1,-1,"","");
- Menu5=new Array("Example 5","javascript:top.location.href='file.htm'","",2,0,0,"","","","","","",-1,-1,-1,"","");
- Menu5_1=new Array("Example 5.1","file.htm","",0,20,140,"","","","","","",-1,-1,-1,"","");
- Menu5_2=new Array("Example 5.2 ","file.htm","",0,0,0,"","","","","","",-1,-1,-1,"","");
The variables
- NoOffFirstLineMenus
- number- The number of menu items 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 overruled 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 overruled 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 overruled 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 overruled 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 overruled by the variable in the menu tree
- BorderWidthMain
- Number- Thickness of the border around the main menu items in pixels.
- BorderWidthSub
- Number- Thickness of the border around the sub menu items in pixels.
- BorderBtwnMain
- Number - Thickness of the border between the main menu items.
- BorderBtwnSub
- Number - Thickness of the border between the sub menu items.
- 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".
Can be overruled by the variable in the menu tree
- MenuCentered
- Text string- Can be "left", "center" or "right".
StartLeft is added to the calculated position.
- MenuVerticalCentered
- Text string- Can be "top", "middle", "bottom" or "static".
When set to static the menu will keep it's position from the top border of the browser window.
StartTop is added to the calculated position.
- ChildOverlap
- Number between 0 and 1- Controls what part of a level is horizontally covered by it's sublevel.
With a value of .25 a level will be covered 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 position.
With a value of .25 a submenu will start 25% of the parents height lower then the parent. Negative values will make the start higher.
- 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.
When set to -1 text is vertical centered.
- StartTop
- Number- When the menu is positioned absolute StartTop defines the vertical position of the menu in the document. When StartTop is between 0 and 1 it is calculated as part of window height.
Is used as offset when MenuVerticalCentered is not "top" or when the menu is positioned relative. Is ignored when the menu is across frames and the frames are orientated in rows.
- StartLeft
- Number- When the menu is positioned absolute StartLeft defines the horizontal position of the menu in the document. When StartLeft is between 0 and 1 it is calculated as part of window width.
Is used as offset when MenuCentered is not "left" or when the menu is positioned relative. Is ignored when the menu is across frames and the frames are orientated in coloms.
- 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 - Number determines to which level the menu unfolds horizontal. When set to 0 all levels unfold vertical.
Normal use will be 0 or 1, but other values are possible.
- 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.
- UnfoldDelay
- Number- The time in milliseconds before an item's childmenu unfolds when the mouse enters the item.
- 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 create the frameset).
When the menu is used in a single page or completely in one frame, this must be ""
- 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 create the frameset).
It is allowed to have SecLineFrame equal to FirstLineFrame.
When the menu is used in a single page or completely in one frame, this must be ""
- DocTargetFrame
- Text string- When the menus are used in a frameset this is the name of the frame where the documents are loaded. (see create the frameset).
Normally this will be equal to SecLineFrame, but can be any frame or window.
When the menu is used in a single page or completely in one frame, this must be ""
- TargetLoc
- Text string- Enables relative positioning of the menu.
Add to your body tag style="margin:0px"
Insert in your page a table (or a row inside an existing table)
<table>
<tr><td valign='top' align='left'>
<div id='MenuPos' style='position:relative; width:102px; height:102px;'><img src='transparent.gif' width='102px' height='82px'></div>
</td></tr>
</table>
width and height should match initial menusize (exception img height should be menu height -20)
set TargetLoc to "MenuPos"
StartTop and StartLeft can be used to get an offset from the calculated position. Also the center variables can still be used.
- MenuWrap
- Number 1 or 0- When set to 1 unfolding submenus are repositioned when they doesn't fit in the browser window.
- RightToLeft
- Number 1 or 0- When set to 1 the menu unfolds from left to right.
- BottomUp
- Number 1 or 0- When set to 1 the menu unfolds from bottom up.
- UnfoldsOnClick
- Number 1 or 0- When set to 1 the menu unfolds onclick, when set to 0 the menu unfolds on mouse over.
- BaseHref
- Text string- Lets you specify the root directory for relative links.
The script precedes your relative links with BaseHref.
For instance:
When you set BaseHref to "http://www.MyDomain/" and a link in the menu is "subdir/MyFile.htm",
the script renders the link to: "http://www.MyDomain/subdir/MyFile.htm"
Can also be used when you use images in the textfields of the menu "MenuX=new Array("<img src='"+BaseHref+"MyImage'>"....
While testing the site on your harddisk use syntax like: var BaseHref="file:///C|/MyFiles/Homepage/"
TIP
1- Make sure the document that loads the script is in the root of the site.
2- Set: var BaseHref=document.location.href.substring(0,document.location.href.lastIndexOf("/")+1);
This will render BaseHref to the location of the document that loaded the script, including the last /
- Arrws
- array- Describes the three images used as arrows.
Format: source, width, height
When source is set to "" the image is not used.
- MenuUsesFrames
- Number 1 or 0- Tells the script if the site uses frames or not. Is only 0 when used on a single page or in a frame that also holds the script and the three framevariables are "".
- RememberStatus
- Number 1, 2 or 0- When set to 1, the menu unfolds to a presetted menu item.
When set to 2, only the corresponding main menu item stays highlighted.
The preset is done in the head section of the target document.
<script type="text/javascript">var SetMenu="2_2_1";</script>
2_2_1 represents the menu item Menu2_2_1=new Array(.......
- BuildOnDemand
- Number 1 or 0- When set to 1 only the main menu is initially build. The sub menus are build when the parent item is moused over.
See also Images and BuildOnDemand
- BgImgLeftOffset
- Number - When rollover for background image is used this value sets the left offset.
- ScaleMenu
- Number 1 or 0 - When set to 1 Menu scales with browsers text size setting.
- HooverBold
- Number 1 or 0- When set to 1 text is switched from normal to bold on mouse over.
- HooverItalic
- Number 1 or 0- When set to 1 text is switched from normal to italic on mouse over.
- HooverUnderLine
- Number 1 or 0- When set to 1 text is switched from normal to underlined on mouse over.
- HooverTextSize
- Number - When set to 1 text is switched from normal to different size on mouse over.
- HooverVariant
- Number 1 or 0- When set to 1 text is switched from normal to small caps on mouse over.
- MenuSlide
- Text string- Adds a graphic effect to the menu. Is only supported by MS IE6+.
If you don't need MenuSlide just leave in the line var MenuSlide=""; and delete the other MenuSlide statements
In general leave the MenuSlide you need in and delete the others.
- MenuShadow
- Text string- Adds a graphic effect to the menu. Is only supported by MS IE6+.
If you don't need MenuShadow just leave in the line var MenuShadow=""; and delete the other MenuShadow statements
In general leave the MenuShadow you need in and delete the others.
- MenuOpacity
- Text string- Adds a graphic effect to the menu. Is only supported by MS IE6+.
If you don't need MenuOpacity just leave in the line var MenuOpacity=""; and delete the other MenuOpacity statement
In general leave the MenuOpacity you need in and delete the other.
Functions
- 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.
Top of page
Menu Tree
All item names start with Menu
The first item on the first level is called Menu1.
The second item on the first level is called Menu2.
The third item on the first level is called Menu3 ,etc.
If Menu1 has sub items, the first of those is called Menu1_1, the second Menu1_2, etc.
If Menu1_2has sub items, 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 variables of the menu tree
Menu1=new Array("TextToShow","Link","BgImage",NoOfSubs,Height,Width,"BgColor","BgHiColor","FontColor","FontHiColor","BorderColor","fontfamily",fontsize,fontbold,fontitalic,"textalign","statustext");
Menu1_1=new Array("TextToShow","Link","BgImage",NoOfSubs,Height,Width,"BgColor","BgHiColor","FontColor","FontHiColor","BorderColor","fontfamily",fontsize,fontbold,fontitalic,"textalign","statustext");
Menu1_2=new Array("TextToShow","Link","BgImage",NoOfSubs,Height,Width,"BgColor","BgHiColor","FontColor","FontHiColor","BorderColor","fontfamily",fontsize,fontbold,fontitalic,"textalign","statustext");
Menu1_2_1=new Array("TextToShow","Link","BgImage",NoOfSubs,Height,Width,"BgColor","BgHiColor","FontColor","FontHiColor","BorderColor","fontfamily",fontsize,fontbold,fontitalic,"textalign","statustext");
Menu1_2_2=new Array("TextToShow","Link","BgImage",NoOfSubs,Height,Width,"BgColor","BgHiColor","FontColor","FontHiColor","BorderColor","fontfamily",fontsize,fontbold,fontitalic,"textalign","statustext");
Menu1_3=new Array("TextToShow","Link","BgImage",NoOfSubs,Height,Width,"BgColor","BgHiColor","FontColor","FontHiColor","BorderColor","fontfamily",fontsize,fontbold,fontitalic,"textalign","statustext");
Menu1_3_1=new Array("TextToShow","Link","BgImage",NoOfSubs,Height,Width,"BgColor","BgHiColor","FontColor","FontHiColor","BorderColor","fontfamily",fontsize,fontbold,fontitalic,"textalign","statustext");
Menu1_3_1_1=new Array("TextToShow","Link","BgImage",NoOfSubs,Height,Width,"BgColor","BgHiColor","FontColor","FontHiColor","BorderColor","fontfamily",fontsize,fontbold,fontitalic,"textalign","statustext");
Menu1_3_1_2=new Array("TextToShow","Link","BgImage",NoOfSubs,Height,Width,"BgColor","BgHiColor","FontColor","FontHiColor","BorderColor","fontfamily",fontsize,fontbold,fontitalic,"textalign","statustext");
Menu2=new Array("TextToShow","Link","BgImage",NoOfSubs,Height,Width,"BgColor","BgHiColor","FontColor","FontHiColor","BorderColor","fontfamily",fontsize,fontbold,fontitalic,"textalign","statustext");
Menu3=new Array("TextToShow","Link","BgImage",NoOfSubs,Height,Width,"BgColor","BgHiColor","FontColor","FontHiColor","BorderColor","fontfamily",fontsize,fontbold,fontitalic,"textalign","statustext");
Menu3_1=new Array("TextToShow","Link","BgImage",NoOfSubs,Height,Width,"BgColor","BgHiColor","FontColor","FontHiColor","BorderColor","fontfamily",fontsize,fontbold,fontitalic,"textalign","statustext");
Menu3_1_1=new Array("TextToShow","Link","BgImage",NoOfSubs,Height,Width,"BgColor","BgHiColor","FontColor","FontHiColor","BorderColor","fontfamily",fontsize,fontbold,fontitalic,"textalign","statustext");
Menu3_2=new Array("TextToShow","Link","BgImage",NoOfSubs,Height,Width,"BgColor","BgHiColor","FontColor","FontHiColor","BorderColor","fontfamily",fontsize,fontbold,fontitalic,"textalign","statustext");
- TextToShow
- Text string- What you want to show in the item. 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 item.
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 item. To use roll over images use "rollover?MyImage1?MyImage2"
When rollover is used BgImgLeftOffset can be used
- NoOfSubs
- Number- The number of sub items of this item in the next level.
- Height
- Number- The height of the item.
Must have a value for each item that ends with 1 (Menu1, Menu5_3_1) In all other items this may be 0.
Items in a vertical column may have different heights, all items in a horizontal row get the height of the first item in that row
If Height is a fraction between 0 and 1 height is calculated as fraction of the window height.
- Width
- Number- The width of the item.
Must have a value for each item that ends with 1 (Menu1, Menu5_3_1) In all other items this may be 0.
Items in a horizontal row may have different widths, all items in a vertical column get the width of the first item in that column
If Width is a fraction between 0 and 1 width is calculated as fraction of the window width.
- BgColor
- Text string- When used it overrules the global variable LowBgColor
When not used it must be "".
- BgHiColor
- Text string- When used it overrules the global variable HighBgColor
When not used it must be "".
- FontColor
- Text string- When used it overrules the global variable LowFontColor
When not used it must be "".
- FontHiColor
- Text string- When used it overrules the global variable HighFontColor
When not used it must be "".
- BorderColor
- Text string- When used it overrules the global variable BorderColor
When not used it must be "".
- FontFamily
- Text string- When used it overrules the global variable FontFamily
When not used it must be "".
- FontSize
- Number- When used it overrules the global variable FontSize
When not used it must be -1.
- FontBold
- Number- When used it overrules the global variable FontBold
When not used it must be -1.
- FontItalic
- Number- When used it overrules the global variable FontItalic
When not used it must be -1.
- TextAlign
- Text string- When used it overrules the global variable MenuTextCentered.
When not used it must be "".
- StatusText
- Text string- When used it overrules the normal use of the status bar.
When not used it must be "".
Top of page
Using images in the menu and BuildOnDemand
When you set BuildOnDemand to 1 only the main menu is initially build. The sub menus are build when the parent item is moused over.
When images are used in the sub menus (also rollover images and background images) they will not get loaded at the initial build, but at the time the submenu with the images is build.
This will cause a delay in the display of the images. To solve this you must preload the images in the function AfterBuild.
- Example:
- Menu1_1=new Array("<img src=\"MyImage.jpg\">","......",".............",..........
Menu1_2=new Array("rollover?RollImage1.jpg?RollImage2.jpg","......",".............",..........
Menu1_3=new Array("............","......","MyBgImage.jpg",..........
Preload the above images in AfterBuild by:
- function AfterBuild(){
- if(FrstCreat){
- PreImg1=new Image(); PreImg1.src="MyImage.jpg";
PreImg2=new Image(); PreImg2.src="RollImage1.jpg";
PreImg3=new Image(); PreImg3.src="RollImage2.jpg";
PreImg4=new Image(); PreImg4.src="MyBgImage.jpg";
}
}
FrstCreat is an internal variable. It is used to make sure the images are preloaded only once.