Table of Contents
  • Getting Started
  • EO.Pdf
  • EO.Web
    • Overview
    • Installation & Deployement
    • EO.Web ToolTip
    • EO.Web Rating
    • EO.Web Slider & RangeSlider
    • EO.Web ListBox
    • EO.Web ComboBox
    • EO.Web Captcha
    • EO.Web ASPX To PDF
    • EO.Web Slide
    • EO.Web Flyout
    • EO.Web EditableLabel
    • EO.Web ImageZoom
    • EO.Web Floater
    • EO.Web Downloader
    • EO.Web ColorPicker
    • EO.Web HTML Editor
    • EO.Web File Explorer
    • EO.Web SpellChecker
    • EO.Web Grid
    • EO.Web MaskedEdit
    • EO.Web Splitter
    • EO.Web Menu
    • EO.Web Slide Menu
    • EO.Web TabStrip
    • EO.Web TreeView
    • EO.Web Calendar
    • EO.Web Callback
    • EO.Web MultiPage
    • EO.Web Dialog
    • EO.Web AJAXUploader
    • EO.Web ProgressBar - Free!
    • EO.Web ToolBar - Free!
  • EO.WebBrowser
  • EO.Wpf
  • Common Topics
  • Reference
Table of Contents
Styles - HOW TOs

EO.Web Menu heavily relies on CSS style properties to control menu appearance. The following table lists some most commonly used style settings.

Task How to do it... Remarks
Set top-level menu group's border Use border-xxxx with TopGroup.Style Can also use TopGroup.Style.BorderStyle, TopGroup.Style.BorderColor, TopGroup.Style.BorderWidth property
Set top-level menu group's background color Use background-color with TopGroup.Style Can also use TopGroup.Style.BackColor property
Set menu group's border Use border-xxxx with MenuItem.SubMenu.Style Can also use MenuItem.SubMenu.Style.BorderStyle, MenuItem.SubMenu.Style.BorderColor, MenuItem.SubMenu.Style.BorderWidth property
Set menu group's background color Use background-color with MenuItem.SubMenu.Style Can also use MenuItem.SubMenu.Style.BackColor property
Set font for all navigation items in a menu group Use font-xxxx with MenuGroup.Style

When you set font for a menu group, the font settings are automatically inherited by every navigation items in the group.

Can also use MenuGroup.Style.Font property.
Set font for an individual navigation item Use font-xxxx with MenuItem.NormalStyle, MenuItem.HoverStyle, MenuItem.DisabledStyle and MenuItem.SelectedStyle

There is no need to provide style settings for every state. However, if you set the font setting for Hover state, you should also set it for Normal state.
Set font color for a navigation item Use color with MenuGroup.Style or MenuItem.NormalStyle, MenuItem.HoverStyle, MenuItem.DisabledStyle or MenuItem.SelectedStyle

Setting font color on a navigation item group will change the font color for every navigation items in the group. If you want a navigation item to have different font colors in different states, you should specify the setting on the navigation item instead of menu group.

You do not need to provide font color settings for every state. However, if you do provide font color for Hover state, you should also provide one for Normal state.
Reserve space between a navigation item group border and a navigation item Use padding-xxxx with MenuGroup.Style

Reserve space around the navigation item text Use padding-xxxx with MenuItem.NormalStyle, MenuItem.HoverStyle, MenuItem.DisabledStyle or MenuItem.SelectedStyle When using both padding-xxxx and border-xxxx with MenuItem.NormalStyle and MenuItem.HoverStyle, special care should be taken to make sure the total space occupied by the padding and border is the same for both states. navigation item may change size if they are not the same.
Set border for a hovering navigation item Use border-xxxx with MenuItem.HoverStyle
Set menu group cursor Use cursor with MenuGroup.Style

To display a hand cursor, use "cursor: hand" in inline style, or use the following in CSS class:
.your_css_class_name
{
...
cursor: pointer;
cursor: hand;
 ...
}
Note the order that the cursor appears in the CSS class is important. For detailed explanation about this setting, see http://developer-test.mozilla.org/en/docs/Giving_'cursor'_a_Hand
Reserve space between the separator and the navigation item group when using MenuGroup.SideImage Use margin-left with MenuItem.NormalStyle See Office2003 skin for an example. Office2003 skin uses this property to avoid separator overlapping with side image.