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 LowSubBgColor="black"; |
| var HighBgColor="lightblue"; |
| var HighSubColor="white"; |
| var FontLowColor="yellow"; |
| var FontSubLowColor="yellow"; |
| var FontHighColor="blue"; |
| var FontSubHighColor="blue"; |
| var BorderColor="yellow"; |
| var BorderSubColor="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; |
| function BeforeStart(){;} |
| function AfterBuild(){;} |
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("<img src='busts.jpg'>","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 of the first level 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.
- LowSubBgColor
- Text string- Background color of the sub elements when 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 of the first level elements when the
mouse is over the element.
Can be a supported color name like red or blue or a RGB string like #ff552a.
- HighSubBgColor
- Text string- Background color of the sub elements 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- First level elements 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.
- FontLowColor
- Text string- Sub elements 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- First level elements 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.
- FontHighColor
- Text string- Sub elements 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 first level elements.
Can be a supported color name like red or blue or a RGB string like #ff552a.
- BorderSubColor
- Text string- Color of the border around the sub 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
- Text string- Can be 'left', 'center' or 'right'.
- 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'
- 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.
- 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.
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
Text to show, Link to link to and background image may be
empty strings ""
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.
All other elements in the same group may have width and height specified.
If not, the dimensions of the first element of the group is used.
Vertical lined up elements may have different height in a group, horizontal
lined up elements may have different width.
For the above menu that would mean:
Menu1=new Array("text to show","Link to link to","background image",No of sub elements,element height,element width);
Menu1_1=new Array("text to show","Link to link to","background image",No of sub elements,element height,element width);
Menu1_2=new Array("text to show","Link to link to","background image",No of sub elements);
Menu1_2_1=new Array("text to show","Link to link to","background image",No of sub elements,element height,element width);
Menu1_2_2=new Array("text to show","Link to link to","background image",No of sub elements);
Menu1_3=new Array("text to show","Link to link to","background image",No of sub elements);
Menu1_3_1=new Array("text to show","Link to link to","background image",No of sub elements,element height,element width);
Menu1_3_1_1=new Array("text to show","Link to link to","background image",No of sub elements,element height,element width);
Menu1_3_1_2=new Array("text to show","Link to link to","background image",No of sub elements);
Menu2=new Array("text to show","Link to link to","background image",No of sub elements);
Menu3=new Array("text to show","Link to link to","background image",No of sub elements);
Menu3_1=new Array("text to show","Link to link to","background image",No of sub elements,element height,element width);
Menu3_1_1=new Array("text to show","Link to link to","background image",No of sub elements,element height,element width);
Menu3_2=new Array("text to show","Link to link to","background image",No of sub elements);
- 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 "<img
src='MyImage'>"
To use roll over images use "rollover:MyImage1:MyImage2"
- 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;}"
- background image
- 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)
- 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.