Description of item states:
Menu items can have the following states - normal, focused, clicked, expanded and disabled.
- Default - the default state of the item.
- Focused - when the item accepts focus either via mouse or keyboard.
- Clicked - when the user clicks the item with the mouse until she releases the button.
- Expanded - when the children of the item are shown.
- Disabled - when the Enabled property of the item is set to false.
The appearance of those states is defined in the skin CSS file. Each state is denoted by a CSS rule which contains a special CSS class. Check
CSS classes used in the structure for more info.
 |
Note that most skins in the RadControls folder do not have a "clicked" style defined. In such cases the clicked state will be the same as the focused state. |
Customizing the appearance of the state of specific items
Each item state can be customized by setting a property of the particular item. The available properties follow:
- CssClass - controls the appearance when the item is in the Default state.
- FocusedCssClass - controls the appearance when the item is focused. The default value of this property is "focused".
- ExpandedCssClass - controls the appearance when the item is expanded. The default value of this property is "expanded".
- ClickedCssClass - controls the appearance when the item is clicked. The default value of this property is "clicked".
- DisabledCssClass - controls the appearance when the item is disabled. The default value of this property is "disabled".
We will show how to tweak the look of the focused state for example.
Suppose that you are using the Outlook skin. The original look of the focused state is like in the picture below:
The following steps will tweak the default look:
1. Define a new CSS rule for the focused state either in the css file of the Outlook skin or in the head tag of the aspx page:
| |
 Copy Code |
|
<head runat="server">
<style type="text/css">
.customFocused
{
background-color:Red;
border:1px solid #002D96;
padding:2px 4px;
}
</style>
</head> |
2. Set the FocusedCssClass for the menu item:
| |
Copy Code |
|
<rad:RadMenuItem runat="server" Text="This" FocusedCssClass="customFocused">
</rad:RadMenuItem> |
The end result will be:
See Also