Hiermenus Go Forth, XVI - DHTML Lab | 3 | WebReference

Hiermenus Go Forth, XVI - DHTML Lab | 3

Logo

Hiermenus Go Forth, XVI:
Version 4.0.9 - The Complete Script (Full-Window)



JavaScript Expressions for Menu Positioning

In Column 35 (Hiermenus Go Forth, I: Version 4 - The External Arrays), we discussed the use of the left_position and top_position top-level menu parameters.

Unfortunately, the parameters have not fully worked as advertised until now.

Now, if you specify a value for left_position and top_position, this value is checked every time the top-level menu is positioned. Whatever value you give these parameters is evaluated whenever necessary.

For example, let's say you need to have a permanently-visible horizontal menu centered on your page (a common request). You should follow these steps:

  1. Create a custom function that returns the required left pixel position for a centered menu, taking the menu identifier as its single string argument:

    function HM_f_CenterMenu(topmenuid) {
    var TheMenu = HM_DOM ? document.getElementById(topmenuid) : HM_IE4 ? document.all(topmenuid) : eval("window." + topmenuid);
    var TheMenuWidth = HM_DOM ? parseInt(TheMenu.style.width) : HM_IE4 ? TheMenu.style.pixelWidth : TheMenu.clip.width;
    var TheWindowWidth = HM_IE ? document.body.clientWidth : window.innerWidth;
    return ((TheWindowWidth-TheMenuWidth) / 2);
}

  2. The function above is just a cross-browser example. You could create separate ones for each of the browser types and include in the browser-specific external files. HM_f_CenterMenu, being cross-browser, is best placed in HM_Loader.js.

  3. Place a call to the function, as a string, in the array that defines the menu you need to center. For the sake of the example, let's assume that you wanted to center HM_Menu2:

    HM_Array2 = [
[100,                          // menu width
"HM_f_CenterMenu('HM_Menu2')", // left_position
50,                            // top_position
"red",                         // font_color
"yellow",                      // mouseover_font_color
"yellow",                      // background_color
"black",                       // mouseover_background_color
"blue",                        // border_color
"green",                       // separator_color
1,                             // top_is_permanent
1,                             // top_is_horizontal
0,                             // tree_is_horizontal
1,                             // position_under
0,                             // top_more_images_visible
1,                             // tree_more_images_visible
"null",                        // evaluate_upon_tree_show
"null",                        // evaluate_upon_tree_hide
],                             // right-to-left
["Experts","https://www.webreference.com/experts/",1,0,1],
["Contents","https://www.webreference.com/index2.html",1,0,0],
["Services","https://www.webreference.com/index2.html",1,0,1],
["About","https://www.webreference.com/about.html",1,0,0]
]

The left_position and top_position parameters are evaluated:

  1. All Browsers: Whenever the top-level menu in a menu tree is made visible.

  2. IE and Gecko (NS6): Whenever the browser window is resized.
    Remember that NS4 loses all DHTML layout and the page is reloaded upon resize, so this feature cannot apply to NS4.



Version 4.0.9 also improves menu positioning after window resize.


Produced by Peter Belesis and

All Rights Reserved. Legal Notices.
Created: May 1, 2001
Revised: May 1, 2001

URL: https://www.webreference.com/dhtml/column52/2.html