We are providing HierMenus to you at no cost. HierMenus code requires a confirmed membership with internet.com. Please register by clicking here and come back soon to download your free copy of HeirMenus code.
Click Here to Register

Site Navigation
Bulletins
About
Documentation
FAQ
Samples
Known Issues
Technology Jobs

internet.commerce

Partner With Us














          
internet.com

IT
Developer
Internet News
Small Business
Personal Technology

Search internet.com
Advertise
Corporate Info
Newsletters
Tech Jobs
E-mail Offers

 
HierMenusCentral Enhance the Functionality of Your Web Site with DHTML HierMenus.
    

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).

Internet.com
The Network for Technology Professionals

Search:

About Internet.com

Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | E-mail Offers

Created: 3/25/2004
Updated: 3/25/2004
URL: http://www.hiermenuscentral.com/documentation/faq/faq4.html