DHTML Lab: HierMenus CENTRAL: Version 3 Full Window Instructions, Step 2 - dhtmlab.com | WebReference

DHTML Lab: HierMenus CENTRAL: Version 3 Full Window Instructions, Step 2 - dhtmlab.com

Instructions -
Full Window (No Frames) -
Step 2 of 5

Revised: June 26, 2001


Return to Step 1Step 2 of 5Go to Step 3
Place the parameter variable script in the HEAD of your document, with the parameters defined appropriately for your application.

<SCRIPT LANGUAGE="JavaScript1.2" TYPE="text/javascript">
<!--
if (isMenu) {
    menuVersion = 3;
    
    menuWidth = 120;
    childOverlap = 50;
    childOffset = 5;
    perCentOver = null;
    secondsVisible = .5;
    
    fntCol = "blue";
    fntSiz = "10";
    fntBold = false;
    fntItal = false;
    fntFam = "sans-serif";
    
    backCol = "#DDDDDD";
    overCol = "#FFCCCC";
    overFnt = "purple";
    
    borWid = 2;
    borCol = "black";
    borSty = "solid";
    itemPad = 3;
    
    imgSrc = "http://www.dhtmlab.com/hiermenus/tri.gif";
    imgSiz = 10;
    
    separator = 1;
    separatorCol = "red";
    
    isFrames = false;      // 
    navFrLoc = "left";     // 
    
    keepHilite = true; 
    clickStart = true;
    clickKill = true;
}
//-->
</SCRIPT>

The above script should be placed immediately after the script from step 1. Since its LANGUAGE= value is "JavaScript1.2" it is only visible to version 4 browsers. A further filtering is done using the isMenu variable to expose the stements to only menu-enabled browsers (NS4 all platforms, IE4+ Win32, IE5 Mac).

The variables declared in the script are global menu parameter variables. That is, they set the default look and behavior of all menu trees. Individual menu trees can have a customized look by setting parameters in the menu arrays, later.

These variables have been discussed in detail in these column pages: column 14, column 18, column 20, column 21.

A quick reference version is reproduced here:

VariableDescriptionValueExample
menuVersionmajor version of script usedIntegermenuVersion = 3
menuWidthwidth of menusInteger (pixels)menuWidth = 120
childOverlapamount by which pop-up child menus horizontally overlap their parent menu, in pixelsInteger (pixels)childOverlap = 50
childOffsetvertical distance from top of menu item to top of corresponding pop-up child menu. Note that, unlike childOverlap, this distance is measured in the parent item, not the parent menu.Integer (pixels)childOffset = 5
perCentOveramount by which pop-up child menus horizontally overlap their parent menu, in percentage. If this variable is given any value but null, it overrides the childOverlap value.Integer (%) / nullperCentOver = 33
clickStartIf true, the menus appear when the user clicks a link. If false, the menus appear when the user mouses over a link.BooleanclickStart = true
clickKillIf true, the menus are hidden when the user clicks on the page away from the menus. If false, the menus are hidden when the user mouses out of the menus.BooleanclickKill = true
secondsVisibleIf clickKill is false, the value of this variable determines the time in seconds that the top-level menu of the menu tree remains visible after the user mouses out of the menu tree.Positive NumbersecondsVisible = .5
fntColThe font color of menu item displayed text.String
(any valid color identifier)
fntCol = "#32D2E4"
fntSizThe font size, in points, of menu item displayed text.Integer (points)fntSiz = 10
fntBoldIf true, the menu item displayed text is rendered as bold text. If false, it is rendered as normal text.BooleanfntBold = false
fntItalIf true, the menu item displayed text is rendered as italic text. If false, it is rendered as normal text.BooleanfntItal = false
fntFamThe font family of menu item displayed text.String
(any font name or font name list)
fntFam = "Arial,Geneva,sans-serif"
backColThe background color of menu items.String
(any valid color identifier)
backCol = "#DDDDDD"
overColThe background color of a menu item when the user mouses over the item.String
(any valid color identifier)
overCol = "#FFCCCC"
overFntThe font color of menu item displayed text, when the user mouses over the item. Explorer always recognizes this variable. Navigator will only implement it if NSfontOver is set to true.String
(any valid color identifier)
overFnt = "purple"
borWidThe width of the menu border. May be set to 0 to remove border.Positive Integer (pixels)borWid = 2
borColThe color of the menu border.String
(any valid color identifier)
borCol = "black"
borStyThe CSS style of the menu border. Only affects Explorer. Navigator will always render a border as "solid". Presently the following styles are supported:

String (valid CSS border style identifier)borSty = "solid"
itemPadThe menu item padding (distance from item edge to item text).Integer (pixels)itemPad = 3
imgSrcThe filename of the image to be used to denote the existence of a child menu, usually an arrow, or triangle. Should be an absolute URL, especially if you use one image across menus in different directories.String
imgSrc = "http://www.dhtmlab.com/art/tri.gif"
imgSizThe size of the above image when displayed. The image is assumed to be square. Therefore a value of 10, means that the image should be rendered as a 10x10 pixel image.Integer (pixels)imgSiz = 10
separatorThe height of the line that separates menu items within a menu.Integer (pixels)separator = 1
separatorColThe color of the item separator lines. Recognized only by Explorer. Navigator will always render the separator lines in the same color as the menu border, borCol.String
(any valid color identifier)
separatorCol = "red"
isFramesVERY IMPORTANT! This variable controls the building and display of the menus. If true, the menus are being used in a frameset. If false, they are in a full window page. Set to false, since you are not using frames.BooleanisFrames = false
navFrLocOstensibly a frameset parameter, navFrLoc can also be used in a full window environment. Setting navFrLoc to "right" will cause the menus to display from right-to-left. If omitted, menus default to left-to-right display. In a full window environment, therefore, this parameter may be:
  1. omitted
  2. set to "left" (redundant)
  3. set to "right"
StringnavFrLoc = "left"
keepHiliteIf set to true, the selected item in a parent menu remains highlighted when the user navigates a child menu.BooleankeepHilite = true

Therefore, in a full window environment, you must make sure that:

Return to Step 1
Step 2 of 5
Go to Step 3

Produced by Peter Belesis and

All Rights Reserved. Legal Notices.
Created: July 20, 1999
Revised: June 26, 2001

URL: http://www.webreference.com/dhtml/hiermenus/version3/instructions/noframes/step2.html