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

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

V4 Setup Instructions
Step 2 of 6


Return to Step 1Step 2 of 6Go to Step 3
Configure the external HM_Loader.js script: set global parameters and file locations.

Their are two things you must configure within the HM_Loader.js file: the global parameters, and the location of the HierMenus scripts on your site.

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 will encounter many of these settings again when you set your page specific parameters and create your menu arrays.

In the absence of a menu specific or page specific parameter, HierMenus will use these global parameters to control the display of menus on your site. Thus, you can use these variables to control the look and feel of your menus throughout your site; while using the page specific parameters to control the look of individual pages and the menu specific parameters to control a specific menu.

The configurable variables within HM_Loader.js, along with their default values as provided in the initial installation, are as follows:


HM_GL_MenuWidth          = 150;
HM_GL_FontFamily         = "Arial,sans-serif";
HM_GL_FontSize           = 10;
HM_GL_FontBold           = true;
HM_GL_FontItalic         = false;
HM_GL_FontColor          = "black";
HM_GL_FontColorOver      = "white";
HM_GL_BGColor            = "transparent";
HM_GL_BGColorOver        = "transparent";
HM_GL_ItemPadding        = 3;
HM_GL_BorderWidth        = 2;
HM_GL_BorderColor        = "red";
HM_GL_BorderStyle        = "solid";
HM_GL_SeparatorSize      = 2;
HM_GL_SeparatorColor     = "yellow";
HM_GL_ImageSrc           = "HM_More_black_right.gif";
HM_GL_ImageSrcLeft       = "HM_More_black_left.gif";
HM_GL_ImageSrcOver       = "HM_More_white_right.gif";
HM_GL_ImageSrcLeftOver   = "HM_More_white_left.gif";
HM_GL_ImageSize          = 5;
HM_GL_ImageHorizSpace    = 5;
HM_GL_ImageVertSpace     = 5;
HM_GL_KeepHilite         = false;
HM_GL_ClickStart         = false;
HM_GL_ClickKill          = 0;
HM_GL_ChildOverlap       = 40;
HM_GL_ChildOffset        = 10;
HM_GL_ChildPerCentOver   = null;
HM_GL_TopSecondsVisible  = .5;
HM_GL_ChildSecondsVisible = .3;
HM_GL_StatusDisplayBuild = 0;
HM_GL_StatusDisplayLink  = 1;
HM_GL_UponDisplay        = null;
HM_GL_UponHide           = null;
HM_GL_RightToLeft        = false;
HM_GL_CreateTopOnly      = HM_NS4 ? true : false;
HM_GL_ShowLinkCursor     = true;
HM_GL_ScrollEnabled      = false;
HM_GL_ScrollBarHeight    = 14;
HM_GL_ScrollBarColor     = "lightgrey";
HM_GL_ScrollImgSrcTop    = "HM_More_black_top.gif";
HM_GL_ScrollImgSrcBot    = "HM_More_black_bot.gif";
HM_GL_ScrollImgWidth     = 9;
HM_GL_ScrollImgHeight    = 5;
HM_GL_ScrollBothBars     = false;
HM_GL_HoverTimeTop       = 1000;
HM_GL_HoverTimeTree      = 1000;

These variables have been discussed in detail in these columns: column 40, column 41, and column 42. A quick reference is reproduced at the bottom of this page.

Near the bottom of HM_Loader.js is a brief section of script that looks like this:

if(HM_IsMenu) {
    document.write("<SCR" + "IPT LANGUAGE='JavaScript1.2' SRC='HM_Arrays.js' TYPE='text/javascript'><\/SCR" + "IPT>");
    document.write("<SCR" + "IPT LANGUAGE='JavaScript1.2' SRC='HM_Script"+ HM_BrowserString +".js' TYPE='text/javascript'><\/SCR" + "IPT>");
}

These statements must be changed to reflect the actual location of the HierMenus arrays and scripts, i.e., the contents of the zipped package you downloaded, on your Web site. Change the SRC= attributes within these statements to point to the directory where the HierMenus scripts live. For example, if you've placed your HierMenus package in the sub-directory /scripts/HM (i.e., the scripts directory is a sub-directory of your root directory, and the HM directory is a sub-directory of scripts) then you would change HM_Loader.js as follows:

if(HM_IsMenu) {
    document.write("<SCR" + "IPT LANGUAGE='JavaScript1.2' SRC='/scripts/HM/HM_Arrays.js' TYPE='text/javascript'><\/SCR" + "IPT>");
    document.write("<SCR" + "IPT LANGUAGE='JavaScript1.2' SRC='/scripts/HM/HM_Script"+ HM_BrowserString +".js' TYPE='text/javascript'><\/SCR" + "IPT>");
}

See also FAQ #5 for further information on file placement.

Global Parameters Quick Reference:

VariableDescriptionValueExample
HM_GL_MenuWidthwidth of menusPixels.
Specified as integer, string, or string JS expression to be evaluated
HM_GL_MenuWidth = 120
HM_GL_FontFamilyThe font family of menu item displayed text.Font name.
Specified as string or string JS expression
HM_GL_FontFamily = "Arial,Geneva,sans-serif"
HM_GL_FontSizeThe font size, in points, of menu item displayed text.Points.
Specified as integer, string, or string JS expression
HM_GL_FontSize = 10
HM_GL_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_GL_FontBold = false
HM_GL_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_GL_FontItalic = false
HM_GL_FontColorThe font color of menu item displayed text.Hexadecimal color value or color name.
Specified as string or string JS expression
HM_GL_FontColor = "#32D2E4"
HM_GL_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_GL_FontColorOver = "purple"
HM_GL_BGColorThe background color of menu items.Hexadecimal color value or color name.
Specified as string or string JS expression
HM_GL_BGColor = "#DDDDDD"
HM_GL_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_GL_BGColorOver = "#FFCCCC"
HM_GL_ItemPaddingThe menu item padding (distance from item edge to item text).Pixels.
Specified as integer, string, or string JS expression
HM_GL_ItemPadding = 3
HM_GL_BorderWidthThe width of the menu border. May be set to 0 to remove border.Pixels.
Specified as integer, string, or string JS expression
HM_GL_BorderWidth = 2
HM_GL_BorderColorThe color of the menu border.Hexadecimal color value or color name.
Specified as string or string JS expression
HM_GL_BorderColor = "black"
HM_GL_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_GL_BorderStyle = "solid"
HM_GL_SeparatorSizeThe height of the line that separates menu items within a menu.Pixels.
Specified as integer, string, or string JS expression
HM_GL_SeparatorSize = 1
HM_GL_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_GL_SeparatorColor = "red"
HM_GL_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_GL_ImageSrc = "HM_More_black_right.gif"
HM_GL_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_GL_RightToLeft = true.Valid GIF or JPG filename URL.
Specified as a string or string JS expression
HM_GL_ImageSrcLeft = "HM_More_black_left.gif"
HM_GL_ImageSrcOverThe filename of the image to be used when the "more" image (HM_GL_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_GL_ImageSrcOver = "HM_More_white_right.gif"
HM_GL_ImageSrcLeftOverThe filename of the image to be used when the "more" image (HM_GL_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_GL_RightToLeft = true.Valid GIF or JPG filename URL.
Specified as a string or string JS expression
HM_GL_ImageSrcLeftOver = "HM_More_white_left.gif"
HM_GL_ImageSizeThe size of the above "more" images when displayed.Pixels.
Specified as integer, string, or string JS expression
HM_GL_ImageSize = 5
HM_GL_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_GL_ImageHorizSpace = 5
HM_GL_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_GL_ImageVertSpace = 5
HM_GL_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_GL_KeepHilite = true
HM_GL_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_GL_ClickStart = false
HM_GL_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_GL_ClickKill = true
HM_GL_ChildOverlappThe horizontal distance a child menu overlaps its parent menu.Pixels.
Specified as integer, string, or string JS expression
HM_GL_ChildOverlap = 50
HM_GL_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_GL_ChildOffset = 10
HM_GL_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_GL_ChildPerCentOver = 33
HM_GL_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_GL_TopSecondsVisible = .5
HM_GL_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_GL_ChildSecondsVisible = .3
HM_GL_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_GL_StatusDisplayBuild = 1
HM_GL_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_GL_StatusDisplayLink = 0
HM_GL_UponDisplaySpecifies a JavaScript statement to be evaluated when a menu tree is made visible.JS Statement.
Specified as a string JS expression
HM_GL_UponDisplay = "document.bgColor='red'"
HM_GL_UponHideSpecifies a JavaScript statement to be evaluated when a menu tree is hidden.JS Statement.
Specified as a string JS expression
HM_GL_UponHide = "document.bgColor='white'"
HM_GL_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_GL_RightToLeft = false
HM_GL_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_GL_CreateTopOnly = false
HM_GL_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_GL_ShowLinkCursor = true
HM_GL_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_GL_NSFontOver = true
HM_GL_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_GL_ScrollEnabled = true
HM_GL_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_GL_ScrollBarHeight = 5
HM_GL_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_GL_ScrollBarColor = "lightgrey"
HM_GL_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_GL_ScrollImgSrcTop = "HM_More_black_top.gif"
HM_GL_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_GL_ScrollImgSrcBot = "HM_More_black_bot.gif"
HM_GL_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_GL_ScrollImgWidth = 9
HM_GL_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_GL_ScrollImgHeight = 5
HM_GL_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_GL_ScrollBothBars = false
HM_GL_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_GL_HoverTimeTop = 1000
HM_GL_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_GL_HoverTimeTree = 1000
Return to Step 1
Step 2 of 6
Go to Step 3

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/step2.html

Justtechjobs.comFind a programming school near you






Online Campus Both