Hiermenus Go Forth, XXII - DHTML Lab | 5 | WebReference

Hiermenus Go Forth, XXII - DHTML Lab | 5


Logo

Hiermenus Go Forth, XXII:
Version 4.1 - The Complete Script (Full-Window)



Vertical Menu Examples

Given the large number of global, page and tree specific parameters available, the variety in HM "look" and "behavior" is immense. Here we illustrate the expected look of menus using the new variable width parameters. The parameters relevant to creating the menus in the screenshots are:

ParameterDiscussed in
top_is_variable_widthThis Column
tree_is_variable_widthThis Column
HM_xx_MenuWidthColumn 40 - The Page-Specific Parameters
menu_widthColumn 35 - The External Arrays
top_more_images_visibleColumn 36 - The External Arrays - New Menu Tree Parameters
HM_xx_RightToLeftUndocumented. Works as assumed
right_to_leftUndocumented. Works as assumed

A fixed width menu tree.
This is the default look, with the menu taking the width specified by:
HM_GL_MenuWidth, HM_PG_MenuWidth, or menu_width.

Ex: HM_PG_MenuWidth = 120;

A variable width top-level menu, without "more" images visible.
Created by setting a maximum allowable width in
HM_GL_MenuWidth, HM_PG_MenuWidth, or menu_width,
turning the display of images off with top_more_images_visible,
and declaring the menu as variable width with top_is_variable_width:

Ex:
HM_Array1 = [
[120,       // menu_width                  [ maximum width ]
,           // left_position
,           // top_position
,           // font_color
,           // mouseover_font_color
,           // background_color
,           // mouseover_background_color
,           // border_color
,           // separator_color
,           // top_is_permanent
,           // top_is_horizontal
,           // tree_is_horizontal
,           // position_under
false,      // top_more_images_visible     [ image display turned off ]
,           // tree_more_images_visible
,           // evaluate_upon_tree_show
,           // evaluate_upon_tree_hide
,           // right_to_left
,           // display_on_click
true,       // top_is_variable_width       [ top-level menu is variable width ]
,           // tree_is_variable_width
],
["Experts","http://www.webreference.com/experts/",1,0,1],
["Contents","http://www.webreference.com/index2.html",1,0,0],
["Services","http://www.webreference.com/index2.html",1,0,1],
["About","http://www.webreference.com/about.html",1,0,0],
["Hot Sites","http://www.webreference.com/hot/",1,0,1]
]

A variable width top-level menu, with "more" images visible.
Created by setting a maximum allowable width in
HM_GL_MenuWidth, HM_PG_MenuWidth, or menu_width,
and declaring the menu as variable width with top_is_variable_width:

Ex:
HM_Array1 = [
[120,       // menu_width                  [ maximum width ]
,           // left_position
,           // top_position
,           // font_color
,           // mouseover_font_color
,           // background_color
,           // mouseover_background_color
,           // border_color
,           // separator_color
,           // top_is_permanent
,           // top_is_horizontal
,           // tree_is_horizontal
,           // position_under
,           // top_more_images_visible
,           // tree_more_images_visible
,           // evaluate_upon_tree_show
,           // evaluate_upon_tree_hide
,           // right_to_left
,           // display_on_click
true,       // top_is_variable_width       [ top-level menu is variable width ]
,           // tree_is_variable_width
],
["Experts","http://www.webreference.com/experts/",1,0,1],
["Contents","http://www.webreference.com/index2.html",1,0,0],
["Services","http://www.webreference.com/index2.html",1,0,1],
["About","http://www.webreference.com/about.html",1,0,0],
["Hot Sites","http://www.webreference.com/hot/",1,0,1]
]

A variable width menu tree.
Created by setting a maximum allowable width in
HM_GL_MenuWidth, HM_PG_MenuWidth, or menu_width,
declaring the top-level menu as variable width with top_is_variable_width,
and declaring all child menus as variable width with tree_is_variable_width:

Ex:
HM_Array1 = [
[120,       // menu_width                  [ maximum width ]
,           // left_position
,           // top_position
,           // font_color
,           // mouseover_font_color
,           // background_color
,           // mouseover_background_color
,           // border_color
,           // separator_color
,           // top_is_permanent
,           // top_is_horizontal
,           // tree_is_horizontal
,           // position_under
,           // top_more_images_visible
,           // tree_more_images_visible
,           // evaluate_upon_tree_show
,           // evaluate_upon_tree_hide
,           // right_to_left
,           // display_on_click
true,       // top_is_variable_width       [ top-level menu is variable width ]
true,       // tree_is_variable_width      [ child menus are variable width ]
],
["Experts","http://www.webreference.com/experts/",1,0,1],
["Contents","http://www.webreference.com/index2.html",1,0,0],
["Services","http://www.webreference.com/index2.html",1,0,1],
["About","http://www.webreference.com/about.html",1,0,0],
["Hot Sites","http://www.webreference.com/hot/",1,0,1]
]

A variable width top-level menu, cascading from right-to-left.
Created by setting a maximum allowable width in
HM_GL_MenuWidth, HM_PG_MenuWidth, or menu_width,
defining the cascade as right-to-left using
HM_GL_RightToLeft, HM_PG_RightToLeft, or right-to-left
and declaring the menu as variable width with top_is_variable_width:

Ex:
HM_Array1 = [
[120,       // menu_width                  [ maximum width ]
,           // left_position
,           // top_position
,           // font_color
,           // mouseover_font_color
,           // background_color
,           // mouseover_background_color
,           // border_color
,           // separator_color
,           // top_is_permanent
,           // top_is_horizontal
,           // tree_is_horizontal
,           // position_under
,           // top_more_images_visible
,           // tree_more_images_visible
,           // evaluate_upon_tree_show
,           // evaluate_upon_tree_hide
true,       // right_to_left               [ tree cascades right-to-left ]
,           // display_on_click
true,       // top_is_variable_width       [ top-level menu is variable width ]
,           // tree_is_variable_width
],
["Experts","http://www.webreference.com/experts/",1,0,1],
["Contents","http://www.webreference.com/index2.html",1,0,0],
["Services","http://www.webreference.com/index2.html",1,0,1],
["About","http://www.webreference.com/about.html",1,0,0],
["Hot Sites","http://www.webreference.com/hot/",1,0,1]
]

A variable width menu tree, cascading from right-to-left.
Created by setting a maximum allowable width in
HM_GL_MenuWidth, HM_PG_MenuWidth, or menu_width,
defining the cascade as right-to-left using
HM_GL_RightToLeft, HM_PG_RightToLeft, or right-to-left
declaring the top-level menu as variable width with top_is_variable_width,
and declaring all child menus as variable width with tree_is_variable_width:

Ex:
HM_Array1 = [
[120,       // menu_width                  [ maximum width ]
,           // left_position
,           // top_position
,           // font_color
,           // mouseover_font_color
,           // background_color
,           // mouseover_background_color
,           // border_color
,           // separator_color
,           // top_is_permanent
,           // top_is_horizontal
,           // tree_is_horizontal
,           // position_under
,           // top_more_images_visible
,           // tree_more_images_visible
,           // evaluate_upon_tree_show
,           // evaluate_upon_tree_hide
true,       // right_to_left               [ tree cascades right-to-left ]
,           // display_on_click
true,       // top_is_variable_width       [ top-level menu is variable width ]
true,       // tree_is_variable_width      [ child menus are variable width ]
],
["Experts","http://www.webreference.com/experts/",1,0,1],
["Contents","http://www.webreference.com/index2.html",1,0,0],
["Services","http://www.webreference.com/index2.html",1,0,1],
["About","http://www.webreference.com/about.html",1,0,0],
["Hot Sites","http://www.webreference.com/hot/",1,0,1]
]

A variable width top-level menu, that displays as would a fixed width menu since the maximum allowable width has been surpassed.
Created by setting a maximum allowable width in
HM_GL_MenuWidth, HM_PG_MenuWidth, or menu_width,
and declaring the menu as variable width with top_is_variable_width:

Ex:
HM_Array1 = [
[120,       // menu_width                  [ maximum width ]
,           // left_position
,           // top_position
,           // font_color
,           // mouseover_font_color
,           // background_color
,           // mouseover_background_color
,           // border_color
,           // separator_color
,           // top_is_permanent
,           // top_is_horizontal
,           // tree_is_horizontal
,           // position_under
,           // top_more_images_visible
,           // tree_more_images_visible
,           // evaluate_upon_tree_show
,           // evaluate_upon_tree_hide
,           // right_to_left
,           // display_on_click
true,       // top_is_variable_width       [ top-level menu is variable width ]
,           // tree_is_variable_width
],
["Experts","http://www.webreference.com/experts/",1,0,1],
["Contents","http://www.webreference.com/index2.html",1,0,0],
["Services","http://www.webreference.com/index2.html",1,0,1],
["About","http://www.webreference.com/about.html",1,0,0],
["Hot Sites","http://www.webreference.com/hot/",1,0,1]
]



On the next page, Some examples of horizontal menus.


Produced by Peter Belesis and

All Rights Reserved. Legal Notices.
Created: August 21, 2001
Revised: August 21, 2001

URL: http://www.webreference.com/dhtml/column58/3.html