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

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

V4 Setup Instructions
Step 6 of 6


Return to Step 5Step 6 of 6View 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 and tree_is_permanent menu parameters), you should create a link in your page. These links should conform to this syntax:



<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
HREFMake 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 / onMouseOutThe 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:
  1. 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"...)

    You may, however, 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).

  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 textThe 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:

  1. The same external files can be used for all pages.

  2. 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.

  3. 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.

Return to Step 5
Step 6 of 6
View all Steps

Produced by Peter Belesis and

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

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

Justtechjobs.comFind a programming school near you






Online Campus Both