HierMenus CENTRAL: HierMenus In Progress. Menu Placement and the Top Left Corner (1/2)

[next]

When TLC Isn't Enough

D.M Ragle, December 11, 2003

A little used but powerful feature of HierMenus arrays allows for the X/Y coordinates of any top level menu (i.e,. the Top Left Corner of the menu) to be specified as JavaScript expressions. These expressions are then dynamically evaluated by HM each time the menu is displayed. Using your own custom function defitions, you can place top level menus on your Web page based on some other element of the page, such as dynamically created objects generated via your own JavaScript code. This "coordinates-as-expressions" functionality was originally introduced with the release of HierMenus 4.0; and later enhanced (in 4.0.10) to recognize the current mouse position in the expressions via the mouse_x_position and mouse_y_position keywords.

A common question asked by HM implementors is how to position the menus based not on the TLC of the menu, but instead based on one of the other coordinates. For example, in designs that pop up menus from the lower portion of the screen, the bottom left corner might be more appropriate. And for designs that pop up menus from the right edge of the screen (common in pages where right-to-left directionality is employed, see Bulletin 9 for more HM-specific information), top right corner positioning is called for. Though HM does not directly support such positioning schemes, using the coordinates-as-expressions feature described above in combination with a small amount of custom code that we will provide in this article will allow you to provide coordinates relative to the menu corner most appropriate for your specific design.

Which Corner is Which?

As mentioned above, top level menus in HierMenus can be positioned using either integers or JavaScript expressions that return integers representing the top left corner of the menu (each coordinate can be retrieved via a separate function). For permanently displayed menus, such coordinates are a required element of your menu configurations. For pop up menus they are optional, as all top-level pop up menus assume the current location of the mouse for the position of the top left corner of the menu. Since the current mouse position can also be referenced within JavaScript expressions (as of HM 4.0.10), this means that the following two menu configurations will behave identically:

HM_Array1 = [
[120,      // menu width
,          // left_position
],         // top_position
["Experts","/experts/",1,0,0],
["Contents","/index2.html",1,0,0]
]
HM_Array2 = [
[120,                 // menu width
"mouse_x_position",   // left_position
"mouse_y_position"],  // top_position
["Experts","/experts/",1,0,0],
["Contents","/index2.html",1,0,0]
]

While HierMenus recognizes only TLC based menu positioning, you can use custom JavaScript expressions to make those top left coordinates relative to other information on the page. Simple geometry dictates that, in order to position menus based on a different corner of the menu, we require only the width and/or height of the menu itself. Our JavaScript expressions can then place the TLC of a top level menu relative to those computed coordinates. Or, in other words:

This is all basic stuff, and most folks who ask the coordinate positioning question stated above already understand this. What they lack, however, is the code they could use in their own JavaScript expressions to determine the width and/or height of a menu. That's the main topic on the next page.

[next]