DHTML Lab: HierMenus CENTRAL: Version 3 Full Window Instructions, Step 5 - dhtmlab.com | WebReference

DHTML Lab: HierMenus CENTRAL: Version 3 Full Window Instructions, Step 5 - dhtmlab.com

Instructions -
Full Window (No Frames) -
Step 5 of 5

Revised: June 26, 2001


Return to Step 4Step 5 of 5View 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, you should create a link in your page. These links should conform to this backward-compatible syntax:


<BODY>
.
. other HTML
.
<A HREF="/"
   onMouseOver="popUp('elMenu1',event)"
   onMouseOut="popDown('elMenu1')">Webreference</A>
<A HREF="/index2.html"
   onMouseOver="popUp('elMenu2',event)"
   onMouseOut="popDown('elMenu2')">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 3.) The menu script will adapt to the parameters you have set.
popUp() / popDown()hierMenus.js includes two functions that control the initial display and the hiding of the menus. These are popUp() and popDown(), respectively. Since JavaScript is case-sensitive, make sure you refer to the functions as popUp and popDown. Calls to POPUP(), popup() or pOpUp() will generate errors.
popUp('elMenu1',event)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 ("elMenu1","elMenu2","elMenu3"...)

    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 popUp():
    ("elMenu1_1","elMenu2_3_2","elMenu3_3_2_3"...)
    See Column 21.

  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.

popDown('elMenu1')popDown() takes only one argument, but it must be the same menu identifier as the popUp() first argument. That is, if popUp() has "elMenu2_3_2" as its first argument, popDown() must have "elMenu2_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 popUp() and popDown() as described above.


Return to Step 4
Step 5 of 5
View all Steps

Produced by Peter Belesis and

All Rights Reserved. Legal Notices.
Created: July 20, 1999
Revised: June 26, 2001

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