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

V5 Setup Instructions
Step 6 of 6

Return to Step 5	Step 6 of 6	View all Steps
Define "hotspots" for mouseovers that display the menus using links in your page's regular HTML flow.

For every menu tree that you have defined that is not permanently visible (see step 4 for a quick discussion of the top_is_permanent menu parameter), you should create a link in your page. In cross-frames implementations, the links should be placed in the navigation page of your frameset. These links should conform to this syntax (below):


<BODY>
.
. other HTML
.
<A HREF="/"
   onMouseOver="HM_f_PopUp('HM_Menu1',event)"
   onMouseOut="HM_f_PopDown('HM_Menu1')">Webreference</A>
<A HREF="/index2.html"
   onMouseOver="HM_f_PopUp('HM_Menu2',event)"
   onMouseOut="HM_f_PopDown('HM_Menu2')">Contents</A>
.
. other HTML
.
</BODY>

Link Syntax Details
HREF	Make sure that a valid URL is included as the value of the `HREF` attribute. All browsers that do not support menus will not display the menu trees, and associated links, and need this link to navigate.
onMouseOver / onMouseOut	The event handlers must be `onMouseOver` and `onMouseOut` even if you have set the `clickStart` and `clickKill` parameter variables to `true` (displaying and/or hiding menus with mouse click. see step 2.) The menu script will adapt to the parameters you have set.
HM_f_PopUp() / HM_f_PopDown()	HierMenus includes two functions that control the initial display and the hiding of the menus. These are `HM_f_PopUp()` and `HM_f_PopDown()`, respectively. Since JavaScript is case-sensitive, make sure you refer to the functions as `HM_f_PopUp` and `HM_f_PopDown`. Calls to `HM_F_POPUP()`, `hm_f_popup()` or `hM_F_pOpUp()` will generate errors. If you've included the full dummy parameters declaration we discussed in step 1 in your page, then you may also use the backwards-compatible `popUp()` and `popDown()` function names.
HM_f_PopUp('`HM_Menu1`',event)	`HM_f_PopUp()` takes two arguments: The first is the menu identifier, passed as a string. In most cases this is the top-level menu in a menu tree ("`HM_Menu1`", "`HM_Menu2`", "`HM_Menu3`"...) The menu identifier is composed of the term `HM_Menu` plus the array number (from your `HM_Arrays.js` file, see step 4) of the actual menu that you wish to display. For example, if you wish to pop-up the menu that you defined as `HM_Array4` in your `HM_Arrays.js` file, then you would use the menu identifier `HM_Menu4`. For the menu defined as `HM_Array21`, you would use `HM_Menu21`; and `HM_Array5_3_2` would be identified as `HM_Menu5_3_2`. As alluded to above, you do not have to choose only top level menus to be popped up from your links. You may also choose to display a menu further down in the menu tree hierarchy as the initial menu of that tree. This is extremely useful if your visitor has already navigated to a level in your site where a top-level menu would be redundant or just useless. Simply include the menu identifier as the first argument of `HM_f_PopUp():` ("`HM_Menu1_1`", "`HM_Menu2_3_2`", "`HM_Menu3_3_2_3`"...) Note, however, that in order to call a child menu of a top level menu directly, the `HM_PG/HM_GL_CreateTopOnly` parameter must be false (see step 2). The second is the `event` object. It must be included, as Navigator needs the `event` object to be passed explicitely, if in an HTML event handler. In script, of course, it is passed implicitely.
HM_f_PopDown('`HM_Menu1`')	`HM_f_PopDown()` takes only one argument, but it must be the same menu identifier as the `HM_f_PopUp()` first argument. That is, if `HM_f_PopUp()` has `"HM_Menu2_3_2"` as its first argument, `HM_f_PopDown()` must have `"HM_Menu2_3_2"` as its sole argument.
link display text	The link's display text should, of course, describe the menu tree, but should also make sense to users who will not see the menus. For example, the link text should never read: "Menu 2" or "Mouseover to see Menu." Since an old browser user will click on it to navigate, they must be informed of where they are going.

Once you have included all your in-page links, the menu navigation system for your site is complete! Painless, wasn't it?

You must follow the same steps for all pages that include the menus. Keep in mind:

The same external files can be used for all pages.
Each page can choose which menu trees are displayed by linking only to the wanted menus. Of course, all menus will be created. Some will simply not be used.
In the same way, each page can choose where in the menu tree hierarchy to start displaying each menu tree, by setting the first arguments of HM_f_PopUp() and HM_f_PopDown() as described above.
In cross-frames implementations, only the main frameset itself and the navigation page needs to be specially setup as per these instructions. The individual content pages that will appear within the main content frame do not require any HM specific alterations.

Return to Step 5

Step 6 of 6

View all Steps

Produced by Peter Belesis and

Created: April 22, 2003
Revised: August 28, 2003

URL: https://www.webreference.com/dhtml/hiermenus/instructions/step6.html

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

Find a programming school near you