DHTML Lab: HierMenus CENTRAL: Version 4 Setup - Step 3 - dhtmlab.com | WebReference

DHTML Lab: HierMenus CENTRAL: Version 4 Setup - Step 3 - dhtmlab.com

V4 Setup Instructions
Step 3 of 6


Return to Step 2Step 3 of 6Go to Step 4
(Optional) Configure and place the page specific variables script in the HEAD of your document.

While the HM_Loader.js script is home to all of the site-wide parameters, or global parameters that are used to control the look and feel of your HierMenus; you can also control the display of your menus on a page by page basis. You accomplish this by inserting this page specific parameter script within the document you want to specifically control. Since HierMenus automatically looks to the global parameters discussed on the previous page when menu or page specific parameters are not provided, this step is optional and only necessary if you have a page or pages that need to behave differently from the rest of your site.

In the absence of a menu specific parameter, HierMenus will use these page specific parameters to control the display of menus on an individual page. You will notice the variables here are the same as the global parameters, with the exception that these parameters are all prefixed with HM_PG. Though these parameters can appear anywhere on your page before the HM_Loader.js script, we recommend that you place them in the HEAD section of your document. Also note that you do not need to insert this entire script if you don't need all the variables; just insert the variables you actually need to specify.

The configurable page specific parameters should be inserted as follows:


<SCRIPT LANGUAGE="JavaScript1.2" TYPE="text/javascript">
<!--
HM_PG_MenuWidth = 150;
HM_PG_FontFamily = "Arial,sans-serif";
HM_PG_FontSize = 10;
HM_PG_FontBold = 0;
HM_PG_FontItalic = 0;
HM_PG_FontColor = "blue";
HM_PG_FontColorOver = "white";
HM_PG_BGColor = "#DDDDDD";
HM_PG_BGColorOver = "#FFCCCC";
HM_PG_ItemPadding = 3;
HM_PG_BorderWidth = 2;
HM_PG_BorderColor = "black";
HM_PG_BorderStyle = "solid";
HM_PG_SeparatorSize = 2;
HM_PG_SeparatorColor = "#d0ff00";
HM_PG_ImageSrc = "HM_More_black_right.gif";
HM_PG_ImageSrcLeft = "HM_More_black_left.gif";
HM_PG_ImageSrcOver = "HM_More_white_right.gif";
HM_PG_ImageSrcLeftOver = "HM_More_white_left.gif";
HM_PG_ImageSize = 5;
HM_PG_ImageHorizSpace = 0;
HM_PG_ImageVertSpace = 2;
HM_PG_KeepHilite = true; 
HM_PG_ClickStart = 0;
HM_PG_ClickKill = false;
HM_PG_ChildOverlap = 20;
HM_PG_ChildOffset = 10;
HM_PG_ChildPerCentOver = null;
HM_PG_TopSecondsVisible = .5;
HM_PG_ChildSecondsVisible = .3;
HM_PG_StatusDisplayBuild =1;
HM_PG_StatusDisplayLink = 1;
HM_PG_UponDisplay = null;
HM_PG_UponHide = null;
HM_PG_RightToLeft = false;
HM_PG_CreateTopOnly = 1;
HM_PG_ShowLinkCursor = 1;
HM_PG_NSFontOver = true;
HM_PG_ScrollEnabled = false;
HM_PG_ScrollBarHeight = 14;
HM_PG_ScrollBarColor = "lightgrey";
HM_PG_ScrollImgSrcTop = "HM_More_black_top.gif";
HM_PG_ScrollImgSrcBot = "HM_More_black_bot.gif";
HM_PG_ScrollImgWidth = 9;
HM_PG_ScrollImgHeight = 5;
HM_PG_ScrollBothBars = false;
HM_PG_HoverTimeTop  = 1000;
HM_PG_HoverTimeTree = 1000;
// -->
</SCRIPT>

These variables have been discussed in detail in these columns: column 40, column 41, and column 42.

A quick reference version is reproduced here:

VariableDescriptionValueExample
HM_PG_MenuWidthwidth of menusPixels.
Specified as integer, string, or string JS expression to be evaluated
HM_PG_MenuWidth = 120
HM_PG_FontFamilyThe font family of menu item displayed text.Font name.
Specified as string or string JS expression
HM_PG_FontFamily = "Arial,Geneva,sans-serif"
HM_PG_FontSizeThe font size, in points, of menu item displayed text.Points.
Specified as integer, string, or string JS expression
HM_PG_FontSize = 10
HM_PG_FontBoldIf true, the menu item displayed text is rendered as bold text. If false, it is rendered as normal text.Boolean.
Specified as true/false, integer (1/0), string, or string JS expression
HM_PG_FontBold = false
HM_PG_FontItalicIf true, the menu item displayed text is rendered as italic text. If false, it is rendered as normal text.Boolean.
Specified as true/false, integer (1/0), string, or string JS expression
HM_PG_FontItalic = false
HM_PG_FontColorThe font color of menu item displayed text.Hexadecimal color value or color name.
Specified as string or string JS expression
HM_PG_FontColor = "#32D2E4"
HM_PG_FontColorOverThe font color of menu item displayed text, when the user mouses over the item.Hexadecimal color value or color name.
Specified as string or string JS expression
HM_PG_FontColorOver = "purple"
HM_PG_BGColorThe background color of menu items.Hexadecimal color value or color name.
Specified as string or string JS expression
HM_PG_BGColor = "#DDDDDD"
HM_PG_BGColorOverThe background color of a menu item when the user mouses over the item.Hexadecimal color value or color name.
Specified as string or string JS expression
HM_PG_BGColorOver = "#FFCCCC"
HM_PG_ItemPaddingThe menu item padding (distance from item edge to item text).Pixels.
Specified as integer, string, or string JS expression
HM_PG_ItemPadding = 3
HM_PG_BorderWidthThe width of the menu border. May be set to 0 to remove border.Pixels.
Specified as integer, string, or string JS expression
HM_PG_BorderWidth = 2
HM_PG_BorderColorThe color of the menu border.Hexadecimal color value or color name.
Specified as string or string JS expression
HM_PG_BorderColor = "black"
HM_PG_BorderStyleThe CSS style of the menu border. Examples:

(see the detailed discussion for browser specific information)
Valid CSS border style identifier
Specified as string or string JS expression
HM_PG_BorderStyle = "solid"
HM_PG_SeparatorSizeThe height of the line that separates menu items within a menu.Pixels.
Specified as integer, string, or string JS expression
HM_PG_SeparatorSize = 1
HM_PG_SeparatorColorThe color of the item separator lines. Only Internet Explorer and Netscape 6 will render the separator color.Hexadecimal color value or color name.
Specified as string or string JS expression
HM_PG_SeparatorColor = "red"
HM_PG_ImageSrcThe filename of the image to be used to denote the existence of a child menu, usually an arrow, or triangle. Many such images are provided with HM, visit this page for a listing.Valid GIF or JPG filename URL.
Specified as a string or string JS expression
HM_PG_ImageSrc = "HM_More_black_right.gif"
HM_PG_ImageSrcLeftThe filename of the image to be used to denote the existence of a child menu, usually an arrow, or triangle. Used when menus are displayed from right to left (i.e., when HM_PG_RightToLeft = true.Valid GIF or JPG filename URL.
Specified as a string or string JS expression
HM_PG_ImageSrcLeft = "HM_More_black_left.gif"
HM_PG_ImageSrcOverThe filename of the image to be used when the "more" image (HM_PG_ImageSrc) is rolled over by the mouse. Leave blank for no more image rollover effect.Valid GIF or JPG filename URL.
Specified as a string or string JS expression
HM_PG_ImageSrcOver = "HM_More_white_right.gif"
HM_PG_ImageSrcLeftOverThe filename of the image to be used when the "more" image (HM_PG_ImageSrcLeft) is rolled over by the mouse. Leave blank for no more image rollover effect. Used when menus are displayed from right to left (i.e., when HM_PG_RightToLeft = true.Valid GIF or JPG filename URL.
Specified as a string or string JS expression
HM_PG_ImageSrcLeftOver = "HM_More_white_left.gif"
HM_PG_ImageSizeThe size of the above "more" images when displayed.Pixels.
Specified as integer, string, or string JS expression
HM_PG_ImageSize = 5
HM_PG_ImageHorizSpaceAmount of additional horizontal space to be added between the item border and the "more" image in a menu item with associated child menu.Pixels.
Specified as integer, string, or string JS expression
HM_PG_ImageHorizSpace = 5
HM_PG_ImageVertSpaceAmount of additional vertical space to be added between the item border and the "more" image in a menu item with associated child menu.Pixels.
Specified as integer, string, or string JS expression
HM_PG_ImageVertSpace = 5
HM_PG_KeepHiliteIf set to true, the selected item in a parent menu remains highlighted when the user navigates a child menu.Boolean.
Specified as true/false, integer (1/0), string, or string JS expression
HM_PG_KeepHilite = true
HM_PG_ClickStartIf true, the menus appear when the user clicks a link. If false, the menus appear when the user mouses over a link.Boolean.
Specified as true/false, integer (1/0), string, or string JS expression
HM_PG_ClickStart = false
HM_PG_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.Boolean.
Specified as true/false, integer (1/0), string, or string JS expression
HM_PG_ClickKill = true
HM_PG_ChildOverlappThe horizontal distance a child menu overlaps its parent menu.Pixels.
Specified as integer, string, or string JS expression
HM_PG_ChildOverlap = 50
HM_PG_ChildOffsetThe vertical distance from the top of a menu item to the top of the corresponding pop-up child menu.Pixels.
Specified as integer, string, or string JS expression
HM_PG_ChildOffset = 10
HM_PG_ChildPerCentOverSets the horizontal distance a child menu overlaps its parent menu, as a percentage of the parent menu's width. If this parameter is omitted, the HM_PG_ChildOverlap parameter is used.Percentage
Specified as integer, string, or string JS expression
HM_PG_ChildPerCentOver = 33
HM_PG_TopSecondsVisibleIf 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.Seconds
Specified as integer, floating point number, string, or string JS expression
HM_PG_TopSecondsVisible = .5
HM_PG_ChildSecondsVisibleIf clickKill is false, the value of this variable determines the time in seconds that the child-level menu of the menu tree remains visible after the user mouses out of the menu tree.Seconds
Specified as integer, floating point number, string, or string JS expression
HM_PG_ChildSecondsVisible = .3
HM_PG_StatusDisplayBuildCauses a message to be displayed in the browser status bar every time a menu element is created and upon completion of menu creation.Boolean.
Specified as true/false, integer (1/0), string, or string JS expression
HM_PG_StatusDisplayBuild = 1
HM_PG_StatusDisplayLinkCauses the link URL associated with a menu item to display in the status bar when the user moves the mouse over the item.Boolean.
Specified as true/false, integer (1/0), string, or string JS expression
HM_PG_StatusDisplayLink = 0
HM_PG_UponDisplaySpecifies a JavaScript statement to be evaluated when a menu tree is made visible.JS Statement.
Specified as a string JS expression
HM_PG_UponDisplay = "document.bgColor='red'"
HM_PG_UponHideSpecifies a JavaScript statement to be evaluated when a menu tree is hidden.JS Statement.
Specified as a string JS expression
HM_PG_UponHide = "document.bgColor='white'"
HM_PG_RightToLeftIf true, menus are displayed from right to left, instead of the normal left-to-right behavior.Boolean.
Specified as true/false, integer (1/0), string, or string JS expression
HM_PG_RightToLeft = false
HM_PG_CreateTopOnlyIf true, only the top level menu(s) is/are created when the initial page loads; child menus are created dynamically when the user activates (rolls over or clicks) a menu item. Can be used to speed the display of the initial menus on the page.Boolean.
Specified as true/false, integer (1/0), string, or string JS expression
HM_PG_CreateTopOnly = false
HM_PG_ShowLinkCursorIf true, the typical mouse pointer is changed to a "link pointer" when the user rolls over an item element with a link.Boolean.
Specified as true/false, integer (1/0), string, or string JS expression
HM_PG_ShowLinkCursor = true
HM_PG_NSFontOverIf true, omit the font color change from the mouseover behavior in Netscape 4.0.6. See this discussion for details.Boolean.
Specified as true/false, integer (1/0), string, or string JS expression
HM_PG_NSFontOver = true
HM_PG_ScrollEnabledIf true, tall child menus that do not fit within the browser window will be scroll-enabled. If omitted or false, no scrolling is enabled.Boolean.
Specified as true/false, integer (1/0), string, or string JS expression
HM_PG_ScrollEnabled = true
HM_PG_ScrollBarHeightThe vertical height of the scroll elements. The "scroll" image will automatically be centered, both horizontally and vertically.Pixels.
Specified as integer, string, or string JS expression
HM_PG_ScrollBarHeight = 5
HM_PG_ScrollBarColorThe background color for the scroll image box at the top/bottom of scroll enabled menus.Hexadecimal color value or color name.
Specified as string or string JS expression
HM_PG_ScrollBarColor = "lightgrey"
HM_PG_ScrollImgSrcTopThe filename of the image to be used in the top scroll element on scroll-enabled menus. Usually an arrow, or triangle. Many such images are provided with HM, visit this page for a listing.Valid GIF or JPG filename URL.
Specified as a string or string JS expression
HM_PG_ScrollImgSrcTop = "HM_More_black_top.gif"
HM_PG_ScrollImgSrcBotThe filename of the image to be used in the bottom scroll element on scroll-enabled menus. Usually an arrow, or triangle. Many such images are provided with HM, visit this page for a listing.Valid GIF or JPG filename URL.
Specified as a string or string JS expression
HM_PG_ScrollImgSrcBot = "HM_More_black_bot.gif"
HM_PG_ScrollImgWidthThe width of the image displayed in the scroll elements. This value is used to position the image horizontally:Pixels.
Specified as integer, string, or string JS expression
HM_PG_ScrollImgWidth = 9
HM_PG_ScrollImgHeightThe height of the image displayed in the scroll elements. This value is used to position the image vertically:Pixels.
Specified as integer, string, or string JS expression
HM_PG_ScrollImgHeight = 5
HM_PG_ScrollBothBarsIf true, the scroll element is always visible on both the top and bottom of tall, scroll-enabled menus. If omitted or false, the top and bottom scroll bars only appear when there are hidden elements in the menu that can be scrolled to (i.e., elements that are outside the visible edges of the menus).Boolean.
Specified as true/false, integer (1/0), string, or string JS expression
HM_PG_ScrollBothBars = false
HM_PG_HoverTimeTopThe interval, in milliseconds, to wait before displaying or hiding a child menu associated with an item in any top-level menu.Milliseconds.
Specified as integer, string, or string JS expression
HM_PG_HoverTimeTop = 1000
HM_PG_HoverTimeTreethe interval, in milliseconds, to wait before displaying or hiding a child menu associated with an item in any menu other than a top-level menu.Milliseconds.
Specified as integer, string, or string JS expression
HM_PG_HoverTimeTree = 1000
Return to Step 2
Step 3 of 6
Go to Step 4

Produced by Peter Belesis and

All Rights Reserved. Legal Notices.
Created: February 1, 2002
Revised: March 13, 2002

URL: http://www.webreference.com/dhtml/hiermenus/version4/instructions/noframes/step3.html

Justtechjobs.comFind a programming school near you






Online Campus Both