Walkthrough: Displaying a Menu on Web Pages

This walkthrough illustrates how to place and configure an ASP.NET Menu control on a Web page.

One common aspect of Web sites of any complexity is a navigational menu. You can use the Menu control in ASP.NET to easily set up a complex navigational menu without writing code.

The Menu control allows for multiple display options, including a static display where the menu is fully exposed and a dynamic display where portions of the menu appear as the mouse pointer moves over the parent menu item. The control also provides a combination of static and dynamic display modes that allow a series of root items that are static, but with child menu items that appear dynamically.

You can configure the ASP.NET Menu control in the designer with static links to your pages or you can bind it automatically to a hierarchical data source such as an XmlDataSource or a SiteMapDataSource control.

Tasks illustrated in this walkthrough include:

• Creating a basic menu and configuring it statically to link to your pages.

• Creating a more complex menu that is bound to a Web.sitemap XML file.

• Adjusting the orientation of a menu.

• Configuring multiple levels of static display versus dynamic display.

Prerequisites

In order to complete this walkthrough, you will need:

• Microsoft Visual Web Developer (Visual Studio).

• The .NET Framework.

Creating the Web Site

If you have already created a Web site in Visual Web Developer (for example, by completing the steps in Walkthrough: Creating a Basic Web Page in Visual Web Developer), you can use that Web site and go to the next section, "Creating a Basic Menu." Otherwise, create a new Web site and page by following these steps.

To create a file system Web site

1. Open Visual Web Developer.

2. On the File menu, click NewWeb Site.

   The New Web Site dialog box appears.

3. Under Visual Studio installed templates, click ASP.NET Web Site.

4. In the Location box, enter the name of the folder where you want to keep the pages of your Web site.

   For example, type the folder name C:\WebSites.

5. In the Language list, click the programming language you prefer to work in.

6. Click OK.

   Visual Web Developer creates the folder and a new page named Default.aspx.

Creating a Basic Menu

The first step in creating a menu for your page is the placement of a Menu control.

To add a Menu control to the page

1. Switch to or open Default.aspx, and then switch to Design view.

2. From the Navigation control group in the Toolbox, drag a Menu control onto the page.

For this example, you will orient the menu horizontally rather than vertically.

To position the Menu control horizontally

• Right-click the Menu control, click Properties, and then set Orientation to Horizontal.

Configuring a Basic Menu

In this section, you will define the menu items by using the Menu Item Editor.

To edit Menu control items

1. Right-click the Menu control, and then click Edit Menu Items.

   The Menu Item Editor appears.

2. Under Items, click the Add a root item icon.

3. Under Properties for the new item, set Text to Home and NavigateURL to Default.aspx.

4. Under Items, click the Add a root item icon.

5. Under Properties, set Text to Products and NavigateURL to Products.aspx.

6. Under Items, click the Add a root item icon.

7. Under Properties, set Text to Services and NavigateURL to Services.aspx.

8. Click OK.

If you look at the source for Default.aspx, you will see that the menu items and links are stated declaratively in the control.

To create the target pages

1. In Solution Explorer, right-click the root of your Web site, and then click Add New Item.

2. Click Web Form, name the file Products.aspx, and then click Add.

3. Repeat the preceding steps and create a file named Services.aspx.

Testing the Menu

With your pages and menu in place, you can try it out.

To test the Menu control

1. Click Default.aspx in Solution Explorer and then press CTRL+F5 to run the Default.aspx page.

2. Move the pointer over the items; the browser's status bar at the bottom of the page (if visible) will show what page is linked.

3. Click a link to jump to the page.

Creating a Menu Bound to a Site Map

In the last section, you created a simple static menu configured declaratively within the page. In this section, you skip editing the Menu control items directly, and instead bind the control to a Web.sitemap file as an XML data source. This allows the Menu control's structure to be maintained within a separate XML file that can be easily updated without modifying the page or using the designer.

For this example you will use a second Menu control.

To create a second Menu control

• From the Navigation group of the Toolbox, drag a second Menu control onto the Default.aspx page.

Next, you will need a Web.sitemap file to bind to.

To create a site map file

1. In Solution Explorer, right-click the root of your Web site, and then click Add New Item.

2. In the Add New Item <Websitename> dialog box, click Site Map.

3. Click Add.

4. Place the following XML code in the Web.sitemap file.

   The XML represents the structure of the menu. Nested nodes become child menu items of parent node menu items.

   <siteMap>
     <siteMapNode title="Home" description="Home" url="default.aspx" >
       <siteMapNode title="Products" description="Our products" 
        url="Products.aspx">
         <siteMapNode title="Hardware" 
          description="Hardware choices"
          url="Hardware.aspx" />
         <siteMapNode title="Software" 
          description="Software choices" 
          url="Software.aspx" />
       </siteMapNode>
       <siteMapNode title="Services" 
        description="Services we offer" 
        url="Services.aspx">
         <siteMapNode title="Training" 
          description="Training classes" 
          url="Training.aspx" />
         <siteMapNode title="Consulting" 
          description="Consulting services" 
          url="Consulting.aspx" />
         <siteMapNode title="Support" 
          description="Support plans" 
          url="Support.aspx" />
       </siteMapNode>
     </siteMapNode>
   </siteMap>
   

5. Save the file.

Binding to a Site Map

Now you can create a navigation data source that points to your Web.sitemap file and bind your Menu control to it.

To bind to a Menu control to a site map

1. Open the Default.aspx file, and then switch to Design view.

2. Click the smart tag to display the Menu Tasks dialog box.

3. In the Menu Tasks dialog box, in the Choose Data Source drop-down list, click New Data Source.

   The Data Source Configuration Wizard dialog box appears.

4. Click Site Map.

   Under Specify an ID for the data source, the default name, SiteMapDataSource1, appears.

5. Click OK.

Testing Site Map Binding

With your pages and menu in place, you can try it out.

To test the site map binding

1. Press CTRL+F5 to run the Default.aspx page.

2. Move the pointer over the Home menu item of the second, vertical menu.

   Products and Services appear.

3. Move the pointer over Products.

   Hardware and Software appear.

   If you look at the source code for Default.aspx, you will notice that unlike the first menu item, the items are not specified declaratively; instead, the data source is referenced by the Menu control.

Adjusting Static and Dynamic Levels

The Menu control has two modes of display: static and dynamic. Static display means that the Menu control is fully expanded all the time. The entire structure is visible, and a user can click on any part. In a dynamically displayed menu, only the portions you specify are static, while their child menu items are displayed when the user holds the mouse pointer over the parent node.

The vertical menu you created in the preceding section uses a fully dynamic display, with only the top level remaining static. With the Menu control, you have the ability to specify behavior based on pausing the mouse pointer and whether or not the menu should be dynamic or static. In this section, you will adjust the dynamic and static qualities of the Menu control.

To make the Menu control static for two levels

1. On the Default.aspx page in Design view, right-click the second Menu control, and then click Properties.

2. Set StaticDisplayLevels to 2.

Testing the Dynamic Menu

With your pages and menu in place, you can try it out.

To test the dynamic menu

• Press CTRL+F5 to run the Default.aspx page.

  The first two levels of the menu are displayed, whereas the third level is dynamic.

Next Steps

The Menu control allows you to easily create navigation menus. You can configure the control for dynamic or static display and bind it to a site map XML file. You might also want to experiment with the following additional options:

• Apply a theme or skin to the Menu control. For details, see Walkthrough: Customizing a Web Site Using Themes in Visual Studio

• Learn more about site navigation. For details, see ASP.NET Site Navigation Overview.

• Use a Menu control on a master page to provide site-wide navigation defined on a single page. For details, see Walkthrough: Creating and Using ASP.NET Master Pages in Visual Web Developer.

• Walk through the steps to implement site navigation. For details, see Walkthrough: Adding Site Navigation to a Web Site.

See Also

Tasks

Walkthrough: Controlling ASP.NET Menus Programmatically

Concepts

Menu Control Overview

Change History