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

V5 Setup Instructions
Step 2 of 6

There are two things that can be configured within the HM_Loader.js file: the global parameters, and the location of the HierMenus scripts on your site. The global parameter settings are optional (if not included, they will simply revert to the script defaults); but the script directory setting is mandatory.

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. The example HM_Loader.js file provided with your HM distribution contains a large number of these global parameters as sample settings. You may alter and or remove these as you see fit.

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. (With the notable exception of HM_ScriptDir, which can only be defined globally in HM_Loader.js.)

Beginning with HM version 5.1, you have a choice of which HM_Loader.js file you wish to deploy on your site: the standard "verbose" version, and an optimized version. The optimized version can be found in the optimized directory of your .ZIP distribution file, while the verbose version can be found in the top level of your .ZIP file. If you elect to install the optimized version, then you should apply the changes described on this page to the HM_Loader.js file located in the optimized subdirectory of your .ZIP file. (And you should then deploy both this loader file as well as the remaining optimized scripts located in the optimized directory instead of the top level scripts.) Further information pertaining to deploying and using the optimized scripts can be found as part of Release Bulletin 5. General optimization information can be found on the first page of that article (refer to that page if you are confused as to the meaning and intent of the optimized scripts, or aren't sure if you should deploy the standard or optimized scripts on your site), while information pertaining specifically to the deployment of the optimized scripts can be found on the second page of the article.

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_ImageHeight        = 9;
HM_GL_ImageHorizSpace    = 5;
HM_GL_ImageVertSpace     = "middle";
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 = 1;
HM_GL_StatusDisplayLink  = 1;
HM_GL_UponDisplay        = null;
HM_GL_UponHide           = null;
HM_PG_NSFontOver         = true;
HM_GL_RightToLeft        = false;
HM_GL_CreateTopOnly      = false;
HM_GL_CreateChildrenJIT  = false;
HM_GL_CreateMenusOnLoad  = true;
HM_GL_ShowLinkCursor     = true;
HM_GL_ScrollEnabled      = true;
HM_GL_ScrollOver         = false;
HM_GL_ScrollInterval     = 20;
HM_GL_ScrollBarHeight    = 16;
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     = true;
HM_GL_ScrollHeightMin    = 30;
HM_GL_TopKeepInWindowX   = 0;
HM_GL_TopKeepInWindowY   = 0;
HM_GL_HoverTimeTop       = 0;
HM_GL_HoverTimeTree      = 0;
HM_GL_FramesEnabled      = false;
HM_GL_FramesNavFramePos  = "top";
HM_GL_FramesMainFrameName = "main";
HM_GL_PreloadImages      = true;
HM_GL_ImageDir           = "";
HM_ScriptDir             = "";
// HM_a_TreesToBuild      = [1,3,5];

A quick reference that briefly describes each of these parameters is reproduced at the bottom of this page; however, a few deserve some special attention.

HM_ScriptDir and HM_ImageDir

These variables must be changed to reflect the location of the Script (HM_ScriptNS4.js, HM_ScriptIE4.js, and HM_ScriptDOM.js) and image (HM_More_black_right.gif, HM_More_black_left.gif, etc.) files on your system. While it is theoretically possible to leave them blank as in the HM_Loader.js that is provided by default, doing so will force you to duplicate all of the script and image files and place them in every directory of your site that contains a page that will produce menus. Obviously this is not desirable, and it is definitely not what we recommend. Instead, place the scripts and images as provided in your original zip download into a specific directory on your site and then adjust these variables once to let HM know where to find the files.

As an example, let's say that you placed the contents of your zip download in a new top level directory on your site called hiermenus. You could then set HM_GL_ImageDir and HM_ScriptDir as follows:

HM_GL_ImageDir = "/hiermenus/";
HM_ScriptDir = "/hiermenus/";

If your domain happens to be https://mydomain.com, then HM will look for the scripts and images in https://mydomain.com/hiermenus. Or, if you prefer a stricter separation, you can place the images in a separate subdirectory, say hiermenus/images, and then set your variables thus:

HM_GL_ImageDir = "/hiermenus/images/";
HM_ScriptDir = "/hiermenus/";

Note that in both cases, the directory locations are enclosed in quotes and always end with a trailing slash (/). Of course, you can also set the variables to be the result of a JavaScript expression, too; but for most implementations simply assigning the names directly as above will suffice. Also note that HM_GL_ImageDir can be specified as a global and page-specific parameter; but HM_ScriptDir can only be defined in HM_Loader.js (since HM_Loader.js needs the variable in order to know where to load the scripts from).

HM_FramesEnabled, HM_PG_FramesNavFramePos, and HM_PG_FramesMainFrameName

These three variables pertain specifically to cross-frames implementations. If you are not enabling cross-frames functionality in your site you may simply leave HM_FramesEnabled set to false and skip to the next section.

In order to enable cross-frames functionality, i.e., the ability to pop-up menus in the content frame from in-page links in a navigation frame, set HM_FramesEnabled to true (or 1, or any other JavaScript expression that evaluates to true). The other two variables pertain to the positioning of the navigation frame in relation to the content frame, and the name of the content frame itself. For further discussion of these parameters and how to setup your frameset tags for HM use, see this discussion.

When using HM in a cross-frames environment, we strongly recommend the use of an onload tag in the main content page's frame tag. Again, this discussion describes the hows and whys of this recommendation and should be required reading for all cross-frames implementations.

HM_a_TreesToBuild

This variable has been available since HM 4.x, but was not officially documented until HM 5.2. Using it allows you to override HM's default menu loading process by specifying precisely which menu trees you want HM to build. Setting this, for example:

HM_a_TreesToBuild = [1,4,6];

Tells HM to build only menus 1, 4, and 6. HM_a_TreesToBuild is more commonly used in conjunction with HM_GL_CreateMenusOnLoad and HM_GL_CreateChildrenJIT. A more thorough discussion of its use can be found in Release Bulletin 7.

Note that HM_a_TreesToBuild is not a global and page specific parameter. It can be specified only in a "global" context; that is, the last HM_a_TreesToBuild setting on the page is the one that HierMenus will use when defining its menus.

Global Parameters Quick Reference: