DHTML Lab: HierMenus CENTRAL: Version 3 Frameset Instructions, Step 6 - dhtmlab.com | WebReference

DHTML Lab: HierMenus CENTRAL: Version 3 Frameset Instructions, Step 6 - dhtmlab.com

Instructions -
Frameset Menus -
Step 6 of 6

Revised: June 26, 2001


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

For every menu tree that you have defined, you should create a link in your navigation 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?

VERY IMPORTANT FINAL NOTE:
Remember, the menus are NOT some magic floating elements that appear over the pages in your main frame. They are positioned HTML elements that are built in the main frame page. That is, they alter the content of the main page by adding to it. For security reasons, authors cannot modify pages that do not belong to them. That is, they cannot modify pages that do not reside on the same server or in the same domain. See our discussion in Column 21.
You cannot, therefore, expect the menus to appear over, say, cnn.com, if you load it into your main page. Only your own pages will display the menus. Outside of the security issue, this should be your preferred behavior. After all, the menus help users navigate your site, and should appear when they are viewing your site only.


Return to Step 5
Step 6 of 6
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/frameset/step6.html