My examination of ASP.NET site map navigation controls -- Site Map, SiteMapPath, and TreeView -- wraps up this week with coverage of the Menu control.
An overview of the Menu control
The Menu control includes static elements displayed on the page and dynamic items or menus that appear when the user selects a particular menu element. It also supports displaying data from a hierarchal data source control. Elements may be defined in a data source or programmatically added to the control. The Menu control may be bound to the values of the SiteMapDataSource control, which uses a site map file.
The examples in this article will use this site map.
<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
<siteMapNode url="Default.aspx" title="Default Page" description="Default page.">
<siteMapNode url="Test1.aspx" title="Test page one" description="Test page 1" />
<siteMapNode url="Test2.aspx" title="Test page two" description="Test page 2">
<siteMapNode url="Test3.aspx" title="Test page three" description="Test page 3" />
</siteMapNode>
</siteMapNode>
</siteMap>
This site map file can easily be used to populate a Menu control. The following ASP.NET master page includes a Menu control, along with the SiteMapDataSource control for the data.
<%@ Master Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>TechRepublic.com - ASP.NET Menu Control</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1">
</asp:Menu>
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
<asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
</asp:contentplaceholder>
</div></form></body></html>
This example uses the Menu control's default behavior where the root node is displayed, and it is expanded dynamically when the mouse hovers over the node. Child nodes are expanded in the same way.
Display options for the Menu control
The Menu control supports two display types: static and dynamic. The static option is used when you want the Menu control to fully expand at all times. The dynamic option allows the entire menu structure or part of it to display dynamically as discussed in the previous example. The two display options are not mutually exclusive -- you may use them together so a portion of the Menu is static, with the rest being dynamic. For example, you may want to display the first two levels of the menu statically, while the remaining nodes are displayed dynamically.
The level of static elements within the Menu is controlled by its StaticDisplayLevels property. The StaticDisplayLevels property is an integer value representing the number of levels to display with a minimum value of one -- a negative or zero value generates an exception. You may use the MaximumDynamicDisplayLevels property with dynamic menus. It defines the number of levels to display for a dynamic element. One is the default value; zero indicates no dynamic menus will be displayed; and a negative value throws an exception. This snippet displays the first two menu levels statically and the next one dynamically:
<asp:Menu StaticDisplayLevels="2" MaximumDynamicDisplayLevels="1" ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1">
</asp:Menu>
Like the TreeView and SiteMapPath controls, the Menu control provides an overwhelming number of properties that you may use to customise and control its presentation. You can set individual properties of the Menu control to specify the size, color, font, and other characteristics of its appearance. The following list includes a sampling of these properties:
|> DisappearAfter: The duration for which a dynamic menu displays after the mouse pointer is no longer over it.
|> DynamicHorizontalOffset: Allows you to define the number of pixels to shift a dynamic menu horizontally relative to its parent menu item.
|> DynamicItemFormatString: Defines text to be displayed for dynamic menu items.
|> DynamicVerticalOffset: Allows you to set the number of pixels to shift a dynamic menu vertically relative to its parent menu item.
|> ItemWrap: Signals whether text for menu items should wrap. This is a Boolean value.
|> Orientation: Allows you to change the orientation of the menu. The supported values are horizontal and vertical.
|> SkinID: Specifies the ID of the skin to apply to the menu.
|> StaticSubMenuIndent: Displays the number of pixels to indent sub menus statically.
In addition, you can apply skins and themes to the Menu control. This snippet alters our Menu control using some of the properties:
<asp:Menu DisappearAfter="250" Orientation="vertical" DynamicHorizontalOffset="5" DynamicVerticalOffset="2" ItemWrap="false" StaticSubMenuIndent="5" StaticDisplayLevels="2" MaximumDynamicDisplayLevels="1" ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1">
</asp:Menu>
The Menu control also provides various options for applying styles to its individual parts.
Styling
You may manipulate the presentation of the Menu control via the previously discussed properties, as well as CSS and available style elements. You can use these elements to style individual aspects of the Menu control:
|> DynamicHoverStyle: Defines the presentation when the mouse hovers over dynamic elements.
|> DynamicMenuItemStyle: Defines the presentation for dynamic menu items.
|> DynamicSelectedStyle: Defines the presentation for selected items in dynamic menus.
|> DynamicMenuStyle: Defines the presentation for dynamic menus.
|> StaticHoverStyle: Defines the presentation when the mouse hovers over static elements.
|> StaticMenuItemStyle: Defines the presentation for static menu items.
|> StaticMenuStyle: Defines the presentation for static menus.
|> StaticSelectedStyle: Defines the presentation for selected items in static menus.
The following sample uses some of these elements to customise the display when users hover over menu items as well as the display of dynamic menu items. Static menu items appear with a gray background when the mouse hovers over them, while dynamic elements have a yellow background and the text is bold. An orange background is used for all dynamic menu items.
<asp:Menu DisappearAfter="250" Orientation="Vertical" DynamicHorizontalOffset="20" DynamicVerticalOffset="50" ItemWrap="false" StaticSubMenuIndent="100" StaticDisplayLevels="2" MaximumDynamicDisplayLevels="1" ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1">
<DynamicHoverStyle BackColor="Yellow" Font-Bold="true" />
<DynamicMenuItemStyle BackColor="orange" Font-Italic="true" />
<StaticHoverStyle BackColor="gray" />
</asp:Menu>
You may use the Menu control properties if you prefer the CSS route when styling items. As an example, the DynamicHoverStyle-CssClass allows you to specify CSS rules for dynamic items when the mouse hovers over them. Additional properties are available for the other elements of a menu. Visit MSDN for more information about the Menu control.
Another option
The SiteMapPath, TreeView, and Menu controls provide a simple way to add powerful navigation features to a Web application. The controls are easy to use, and they offer an overwhelming number of options that allow you to customise their presentation without any coding. Users appreciate easy ways to navigate a site and quickly locate what they need.
Is there information about ASP.NET site map controls that you think I should have covered in this four-part series? What is your experience with site maps?
This was published in 
1
Max - 21/07/08
I would like to know how to make clickable all the area (also the background and not just the link) of the menu item coming from the sitemapdatasource.
Thanks
» Report offensive content
2
Lochner - 28/10/08
Like Max, I'd like to have the whole area be clickable - not only the link. Please can you give us some pointers. Thanks!
» Report offensive content
3
Eric - 06/12/08
Seems like something you would do with css.
» Report offensive content
4
test - 19/02/09
I think the asp.net menu control is completely useless and far behind in terms of today's menu standards that is just my two cents
» Report offensive content
5
Ahmed - 09/03/09
how to personalize menu as collapsible drop down for sub items??
» Report offensive content