|
home / faq / faq 4
|
Frequently Asked Question #4
Question: Most OS menus have separators. That is, horizontal bars that
can be used to divide the menu items into logical sections. How can I include separators
using HierMenus?
Answer: Menu items can accept HTML to help format the display, which
means you can include within your menu items HTML tags to present the elements the way
you want them to. Your use of HTML isn't unlimited; but simple HTML formatting will
usually work properly. See FAQ #2 for an example of this.
We can, therefore, include the <hr> tag in our menu item DisplayText,
creating a separator:
|
HM_f_SetItems(
{MenuID:"hm_m1",DisplayText:"3-D Animation",LinkURL:"http://www.webreference.com/3d/"},
{MenuID:"hm_m1",DisplayText:"Design",LinkURL:"http://www.webreference.com/dlab/"},
{MenuID:"hm_m1",DisplayText:"<hr size='1' />",IsRollover:0,IsGroupSeparator:1},
{MenuID:"hm_m1",DisplayText:"DHTML",LinkURL:"http://www.webreference.com/dhtml/"}
);
|
If you choose to create a separator in this way, you are including it as a new
menu item, albeit a static one. It will have the same rollover behavior as all other
items, unless you exclude it from rolling over using the
IsRollover parameter.
Note also that we added the
IsGroupSeparator parameter
to the separator item. For variable width menus, adding the IsGroupSeparator
directive can help to avoid mis-sizing the separator horizontally.
IsGroupSeparator will have no noticeable effect on fixed width menus.
You can also create a separator by including it within an item:
|
HM_f_SetItems(
{MenuID:"hm_m1",DisplayText:"3-D Animation",LinkURL:"http://www.webreference.com/3d/"},
{MenuID:"hm_m1",DisplayText:"Design<hr size='1' />",LinkURL:"http://www.webreference.com/dlab/"},
{MenuID:"hm_m1",DisplayText:"DHTML",LinkURL:"http://www.webreference.com/dhtml/"}
);
or
HM_f_SetItems(
{MenuID:"hm_m1",DisplayText:"3-D Animation",LinkURL:"http://www.webreference.com/3d/"},
{MenuID:"hm_m1",DisplayText:"Design",LinkURL:"http://www.webreference.com/dlab/"},
{MenuID:"hm_m1",DisplayText:"<hr size='1' />DHTML",LinkURL:"http://www.webreference.com/dhtml/"}
);
|
But the resulting rollover effect (the separator will be included as part of the
rollover) may be undesirable.
Beginning with HierMenus version 6, you can also create separators by way of the
SeparatorSize,
SeparatorStyle, and
SeparatorColor parameters.
Since these can now be applied on an item by item basis, you can set up your
separators such that they only appear where you want them to. Here's the
same example as above, only using the native HierMenus separators to accomplish a
similar effect:
|
HM_f_SetMenus({MenuID:"hm_m1",SeparatorSize:0,SeparatorColor:"maroon"});
HM_f_SetItems(
{MenuID:"hm_m1",DisplayText:"3-D Animation",LinkURL:"http://www.webreference.com/3d/"},
{MenuID:"hm_m1",DisplayText:"Design",
LinkURL:"http://www.webreference.com/dlab/",
SeparatorSize:1},
{MenuID:"hm_m1",DisplayText:"DHTML",LinkURL:"http://www.webreference.com/dhtml/"}
);
|
Notice that we first set the default SeparatorSize/Color on the menu itself
to 0, so that no separators will appear between the remaining items in the menu. Then
we add the one separator we want into the Design menu item. When applied directly
to items in this manner, the Separator parameters apply to the separator that
appear below the item (in vertical menus) or to the right of the item (in horizontal
menus).
|
|
