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

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

V5 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 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):

. other HTML
<A HREF="/"
<A HREF="/index2.html"
. other HTML
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:
  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"...)

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

  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.

  4. 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: http://www.webreference.com/dhtml/hiermenus/instructions/step6.html

Justtechjobs.comFind a programming school near you

Online Campus Both