Menu control

  • Article

The Menu control allows you to develop both statically and dynamically displayed menus for your ASP.NET web pages. You can configure the contents of the Menu control directly in the control, or you can specify the contents by binding the control to a data source.

To add a Menu control to a page

  • Drag the Menu control from the Toolbox task pane to your page.

Defining menu content

You can define content for the Menu control in two ways: by interactively (or programmatically) adding individual menu items or by data binding the control to a Site Map or XML data source.

To define items for the Menu control

  1. In Design view, right-click the Menu control, and then click Show Common Control Tasks.

  2. On the Common DropDownList Tasks menu, click Edit Menu Items.

  3. In the Menu Item Editor dialog box, click Add a root itemCc295472.ceca6b3c-d5cc-48da-9bd7-fffcc486d45d(en-us,Expression.10).jpg to add an item.

  4. In the Properties area, set the Text and href properties — and any other properties you want to set for the menu item.

  5. Add additional root items or add child items to the selected item by clicking Add a child itemCc295472.b6fcf26e-e12d-4faa-ad58-a448cb5d25b0(en-us,Expression.10).jpg.

  6. When you have added several menu items, you can adjust their order and indention by selecting an item and clicking Move the item up amongst its siblingsCc295472.21730f68-38b2-45cd-980f-5a48feb6987d(en-us,Expression.10).jpg, Move an item down amongst its siblingsCc295472.4cfe2717-2851-4922-bb52-9c38fdda20c4(en-us,Expression.10).jpg, Make the selected item a sibling of its parentCc295472.b89d598e-1bab-4ec7-a256-e769699de3e6(en-us,Expression.10).jpg, Make the selected item the child of its preceding siblingCc295472.5d22e6e0-3cd4-4f0a-bc7d-69cd895fff90(en-us,Expression.10).jpg, or Remove an itemCc295472.27e0c529-accb-4203-a5de-1deb9142cea6(en-us,Expression.10).jpg.

Binding to an XML file allows you to control the menu's content through edits to the file, rather than by using the designer. This allows you to update the navigational aspect of your site without revisiting the Menu control or editing any code. If you have a site with changing content, an XML file can be used to organize the content, and fed to the Menu control to make sure the content is accessible to users of the website.

To bind the Menu control to a data source

  1. In Design view, right-click the Menu control, and then click Show Common Control Tasks.

  2. On the Common DropDownList Tasks menu, select an existing data source or <New data source> in the Choose Data Source dropdown.

Note

Existing data sources can be edited in the Data Source Library task pane.

  1. If you choose <New data source>, the Data Source Configuration Wizard opens. Click Site Map or XML File in the Where will the application get data from? box and give the data source an ID in the Specify an ID for the data source box.

  2. If you choose XML File, in the Configure Data Source dialog box, specify the XML file in the Data file box, and, optionally an XSL transform file or XPath expression for the XML data source.

  3. Click OK in the dialog box and wizard to get back to the control in Design view.

  4. Right-click the control and click Edit MenuItem Databindings on the shortcut menu.

  5. In the Available data bindings list, select an XML field to which you want to bind the menu and click Add.

  6. Select the field in the Selected data bindings list and set property values in the Data binding properties area. For example, to specify what text is displayed in the menu, choose #InnerText in the TextField property dropdown to display the text between the XML element start and end tags.

  7. For more information about binding to an XML data source, and about programming the Menu control, see Menu Class in the MSDN library.

Appearance and behavior

You can adjust the behavior of the Menu control through its properties. Additionally, you can control the behavior of dynamic display, including the amount of time a menu node remains visible once it is displayed. For example, to change the Menu orientation from horizontal to vertical, you can set the Orientation property to Vertical.

To apply basic formatting schemes to the Menu control

  1. In Design view, right-click the Menu control, and then click Show Common Control Tasks.

  2. On the Common Menu Tasks menu, click AutoFormat.

  3. In the AutoFormat dialog box, select one of the schemes in the Select a scheme list. The effect of the scheme on your Menu control is displayed in the Preview area.

  4. Click OK to apply the formatting scheme and close the dialog, or Apply to apply the formatting scheme without closing the dialog.

The Menu is composed of various template regions. You can also interactively design these.

To interactively design a template

  1. In Design view, right-click the Menu control, and then click Show Common Control Tasks.

  2. On the Common Menu Tasks menu, click Edit Templates. This switches the Menu into Template Editing Mode.

  3. In the Display dropdown, select the template you would like to edit.

  4. Add text or controls or make changes to the Template.

  5. When you are finished designing your templates, on the Common Menu Tasks menu, click End Template Editing to return to the standard Menu design mode.

As is the case with all ASP.NET controls, you can designate appearance and behavior by setting properties in the Tag Properties task pane. For a full description of all Menu control properties, see Menu Members in the MSDN library.

Static display and dynamic display

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.

You can choose whether your Menu control in Design view displays as a dynamic or static menu.

To design dynamic or static menus

  1. In Design view, right-click the Menu control, and then click Show Common Control Tasks.

  2. On the Common Menu Tasks menu, choose Dynamic or Static in the Views dropdown. The template changes to the view you choose.

    • Static Display Behavior

      You can control static display behavior by using the StaticDisplayLevels property of the Menu control. The StaticDisplayLevels property indicates how many levels to display statically from the root of the menu. For example, if StaticDisplayLevels is set to 3, your menu will be expanded to statically display its first three levels. The minimum static display level is 1, and the control will throw an exception if the value is set to 0 or a negative number.

    • Dynamic Display Behavior

      The MaximumDynamicDisplayLevels property specifies how many levels of dynamically appearing menu nodes should be displayed after the static display level. For example, if your menu has a static level of 3 and a dynamic level of 2, the first three levels of your menu would be statically displayed, while the next two levels would be dynamic.

      If MaximumDynamicDisplayLevels is set to 0, no menu nodes will be dynamically displayed. If the MaximumDynamicDisplayLevels is set to a negative number, an exception is thrown.

      One aspect of a dynamic menu is the amount of time it takes for the dynamically appearing portion of a menu to disappear. This value is configurable in milliseconds by adjusting the DisappearAfter property, for example, setting it to 1000 for one second.

      The default value is 500 milliseconds, or half a second. If the value of DisappearAfter is set to 0, pausing outside of the Menu control causes it to disappear immediately. Setting the value to -1 indicates that the pause time should be infinite, and only by clicking outside of the Menu control will the dynamic portion vanish.

See also

Concepts

ASP.NET navigation controls overview

SiteMapPath control

TreeView control