DHTML Lab: HierMenus CENTRAL: Version 5 Setup - Step 3 | WebReference

DHTML Lab: HierMenus CENTRAL: Version 5 Setup - Step 3

V5 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 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_ImageHeight = 9;
HM_PG_ImageHorizSpace = 0;
HM_PG_ImageVertSpace = "middle";
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_CreateChildrenJIT = 0;
HM_PG_CreateMenusOnLoad = 1;
HM_PG_ShowLinkCursor = 1;
HM_PG_NSFontOver = 1;
HM_PG_ScrollEnabled = false;
HM_PG_ScrollOver = false;
HM_PG_ScrollInterval = 20;
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_ScrollHeightMin = 30;
HM_PG_TopKeepInWindowX = 0;
HM_PG_TopKeepInWindowY = 0;
HM_PG_PreloadImages = true;
HM_PG_HoverTimeTop = 0;
HM_PG_HoverTimeTree = 0;
HM_PG_FramesEnabled = false;
HM_PG_FramesNavFramePos = "top";
HM_PG_FramesMainFrameName = "main";
HM_PG_ImageDir = "";
// -->
</script>

Here's a quick reference covering each of these variables (and a couple others that are less commonly used):

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 (width) of the above "more" images when displayed.Pixels.
Specified as integer, string, or string JS expression
HM_PG_ImageSize = 5
HM_PG_ImageHeightThe height of the above "more" images when displayed.Pixels.
Specified as integer, string, or string JS expression
HM_PG_ImageHeight = 9
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; or one of three keywords: "top", "middle", or "bottom".Pixels; strings.
Specified as integer, string, or string JS expression
HM_PG_ImageVertSpace = "middle"
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_ChildOverlapThe 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_CreateMenusOnLoadIf true, HM automatically attempts to create menus when the HTML page is fully loaded. If false, HM waits until the first actual request for each menu tree before building it.Boolean.
Specified as true/false, integer (1/0), string, or string JS expression
HM_PG_CreateMenusOnLoad = true
HM_PG_CreateChildrenJITIf true, all child menus are created only when they are specifically requested to be displayed for the first time.Boolean.
Specified as true/false, integer (1/0), string, or string JS expression
HM_PG_CreateChildrenJIT = 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.x. 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_ScrollOverIf true, scrollable menus will begin scrolling when the mouse is rolled over the menu's scrollbar. if false, menus will not begin scrolling until the scrollbars are clicked.Boolean.
Specified as true/false, integer (1/0), string, or string JS expression
HM_PG_ScrollOver = false
HM_PG_ScrollIntervalThe speed with which menus are scrolled. Smaller number=faster scrolling.Milliseconds.
Specified as integer, string, or string JS expression
HM_PG_ScrollInterval = 20
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_ScrollHeightMinThe minimum height of scrolling menus not including the scrollbars themselves. Menus will not be displayed with less than this much space between the top and bottom scroll bars, even if the entire menu won't fit on screen.Pixels.
Specified as integer, string, or string JS expression
HM_PG_ScrollHeightMin = 30
HM_PG_TopKeepInWindowXIndicates whether or not top-level menus should be horizontally repositioned such that as much of the menu as possible is displayed within the viewable portion of the user's browser window.Boolean.
Specified as true/false, integer (1/0), string, or string JS expression
HM_PG_TopKeepInWindowX = true
HM_PG_TopKeepInWindowYIndicates whether or not top-level menus should be vertically repositioned such that as much of the menu as possible is displayed within the viewable portion of the user's browser window.Boolean.
Specified as true/false, integer (1/0), string, or string JS expression
HM_PG_TopKeepInWindowY = true
HM_PG_FramesEnabledUsed in conjunction with the following two parameters. If true, then cross-frames HM behavior is assumed; specifically, HM will assume that the links that are to induce popup menus will be in a navigation frame, but that the actual popup menus themselves will appear in a content frame. If omitted or false, the standard HM behavior is assumed (menus will popup in the same page in which they were loaded).Boolean.
Specified as true/false, integer (1/0), string, or string JS expression
HM_PG_FramesEnabled = false
HM_PG_FramesNavFramePosOne of top, right, bottom, or left. Inidicates the position of the navigation frame in relationship to the content frame, and therefore controls the placement of the menus when popped up in the content frame.Only the four values described may be used
Specified as string or string JS expression
HM_PG_FramesNavFramePos = "left"
HM_PG_FramesMainFrameNameThe name of the frame in which menus will be popped up (i.e., not the name of the navigation frame into which the menus were initially loaded). This name must also be specified within the frame tag that defined the content frame itself.Specified as string or string JS expressionHM_PG_FramesMainFrameName = "main"
HM_PG_HighestMenuNumberThe highest menu number present in the array configuration file. Setting this variable is entirely optional, but allows you to expand your menus beyond the 100 top-level menu limit embedded within the scripts themselves. There is also a slight efficiency gain by setting this variable to the actual highest array number specified, though this efficiency gain will not be noticeable.Specified as integer, string, or string JS expressionHM_PG_HighestMenuNumber = 120
HM_PG_ReloadIntervalUsed only in cross-frames implementations. The specific amount of time the browser should wait after a content-frame page has unloaded before it checks the newly loaded page for menu rebuilds. Do not adjust this value unless you are sure you need to. Default is 200; lower values are not recommended.Milliseconds.
Specified as integer, string, or string JS expression
HM_PG_ReloadInterval = 200
HM_PG_PreloadImagesIf true, HM automatically preloads all needed "more" images, as well as all images indicated in the HM_o_RolloverImages object.Boolean.
Specified as true/false, integer (1/0), string, or string JS expression
HM_PG_PreloadImages = true
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

Created: April 22, 2003
Revised: October 23, 2003

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

Justtechjobs.comFind a programming school near you






Online Campus Both