Software Development

ASP.NET's Menu control offers another site map navigation option

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.

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 customize 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 customize 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 customize 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?

Tony Patton began his professional career as an application developer earning Java, VB, Lotus, and XML certifications to bolster his knowledge.

---------------------------------------------------------------------------------------

Get weekly .NET tips in your inbox TechRepublic's free .NET newsletter, delivered each Wednesday, contains useful tips and coding examples on topics such as Web services, ASP.NET, ADO.NET, and Visual Studio .NET. Automatically subscribe today!

About

Tony Patton has worn many hats over his 15+ years in the IT industry while witnessing many technologies come and go. He currently focuses on .NET and Web Development while trying to grasp the many facets of supporting such technologies in a productio...

6 comments
Rahul_Info
Rahul_Info

can any one tell me how to build an asp.net menu dynamically by accessing data through database. u can mail me on cannavaro.italia@indiatimes.com Thanks in advance. hoping for a good reply bye

santosh
santosh

Suppose there is a link 'Test link' in Menu and that is redirecting to the page Test.aspx. In test.aspx there are two tabs like Add, View. In view tab my selected link is missing. I have used in my menu :

sarah
sarah

Is there a similar overview on the grid view and treenode controls on this website? That would be greatly appreciated.

Johnj4269
Johnj4269

Neat exposition - nearly makes it look easy!

Johnj4269
Johnj4269

Clean exposition - nearly makes it look simple!

Justin James
Justin James

Tony - Thanks for the greatr finale on this series. SiteMap related controls are very handy because they use a commonly defined data source to drive a ton of great functionality. Using the built-in ASP.Net controls can save many hours worth of work for some good interface options. J.Ja

Editor's Picks