The Menu control is used to create a menu of hierarchical data that can be used to navigate through the pages.
The Menu control conceptually contains two types of items. First is StaticMenu that is always displayed on the page, Second is DynamicMenu that appears when opens the parent item.
Its properties like BackColor, ForeColor, BorderColor, BorderStyle, BorderWidth, Height etc.
are implemented through style properites of <table, tr, td/> tag.
Following are some important properties that are very useful.
| Properties of Menu Control |
| DataSourceID |
Indicates the data source to be used (You can use .sitemap file as datasource).
|
| Text |
Indicates the text to display in the menu.
|
| Tooltip |
Indicates the tooltip of the menu item when you mouse over.
|
| Value |
Indicates the nondisplayed value (usually unique id to use in server side events)
|
| NavigateUrl |
Indicates the target location to send the user when menu item is clicked. If not set you can handle MenuItemClick event to decide what to do.
|
| Target |
If NavigationUrl property is set, it indicates where to open the target location (in new window or same window).
|
| Selectable |
true/false. If false, this item can't be selected. Usually in case of this item has some child.
|
| ImageUrl |
Indicates the image that appears next to the menu item.
|
| ImageToolTip |
Indicates the tooltip text to display for image next to the item.
|
| PopOutImageUrl |
Inidcates the image that is displayed right to the menu item when it has some subitems.
|
| Target |
If NavigationUrl property is set, it indicates where to open the target location (in new window or same window).
|
| Styles of Menu Control |
| StaticMenuStyle |
Sets the style of the parent box in which all menu items appears.
|
| DynamicMenuStyle |
Sets the style of the parent box in which dynamic menu items appears.
|
| StaticMenuItemStyle |
Sets the style of the individual static menu items.
|
| DynamicMenuItemStyle |
Sets the style of the individual dynamic menu items.
|
| StaticSelectedStyle |
Sets the style of the selected static items.
|
| DynamicSelectedStyle |
Sets the style of the selecdted dynamic items.
|
| StaticHoverStyle |
Sets the mouse hovering style of the static items.
|
| DynamicHoverStyle |
Sets the mouse hovering style of the dynamic items (subitems).
|
|
DEMO : Menu
|
Show Source Code
|
|
|
// Menu Control ////////////////////////////
<asp:Menu ID="Menu1" runat="Server" DataSourceID="SiteMapDataSource1"
Orientation="Horizontal" BackColor="#B5C7DE" DynamicHorizontalOffset="2" Font-Names="Verdana" Font-Size="0.8em" ForeColor="#284E98" StaticDisplayLevels="2" StaticSubMenuIndent="10px"
>
<StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
<DynamicHoverStyle BackColor="#284E98" ForeColor="White" />
<DynamicMenuStyle BackColor="#B5C7DE" />
<StaticSelectedStyle BackColor="#507CD1" />
<DynamicSelectedStyle BackColor="#507CD1" />
<DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
<StaticHoverStyle BackColor="#284E98" ForeColor="White" />
</asp:Menu>
// SiteMapDataSource Control ////////////////////////////
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="Server" />
|