avigational menus are an obvious requirement for many Web applications, used in nearly every multi-page site, from family sites to multinational e-commerce systems. Until now, developers have relied on third party components or custom code to create and activate browser-based navigational menus; however, maintaining menus manually becomes increasingly difficult as sites grow and change. Even simply adding and deleting menu items or changing fonts and colors can be difficult.
That's about to change. The upcoming ASP.NET version 2.0 includes a navigational menu capability implemented in an easy-to-use and flexible Menu control. This article covers the basics of using the new Menu control, including how to change its appearance, how to bind it to data, and how to cache menus for increased scalability.
What Does the Menu Control Do?
The Menu control provides features that help you develop both static and dynamic menus. When rendered in the browser, static menus are fully expanded all the time; in other words, the entire structure is visible, and a user can click on any part at any time (see Figure 1). In contrast, dynamic menus display only a portion of the menu initially; other portions (submenus) appear when users hover the mouse pointer over a parent menu item (see Figure 2).
You configure the content of the Menu control in one of three ways: by entering the menu items directly in the control at design time, via code at runtime, or by binding the control to a data source.
You can control the appearance, orientation, and content of the Menu control easily without writing any complex code. In addition to basic visual properties, the control supports ASP.NET control skins and themes. And of course, you have complete programmatic access to the Menu control's object model so you can create menus and menu items and set properties dynamically. Like other ASP.NET controls (and unlike many third party controls), the new ASP.NET Menu control supports adaptive rendering, meaning it renders its content appropriately for different types of devices and browsers, so you can write and maintain a single version of the control rather than maintaining separate versions for different devices.
|Figure 1. Static Menu Control Example: A static menu always displays all the available menu items.||
|Figure 2. Dynamic Menu Control Example: A dynamic menu may have the same content as a static menu, but hides sub-menus until a user clicks on or moves the mouse over a parent menu item.|