2.7. Display Drop-Down Menus Using the Menu Control
Note: You can now use the Menu control in ASP.NET 2.0 to menu on the client side. No more client-side script!
Besides using the TreeView control to display site information, you can also use the Menu control to automatically generate a drop-down menu on the browser using client-side script. Sometimes menus are a useful means of navigating a site. For example, Nissan Motors USA (http://www.nissanusa.com) uses menus to allow visitors of their site to choose the various vehicle models they want to view.
2.7.1. How do I do that?
In this lab, you will add a Menu control to the Master page created in the earlier lab Section 2.5. The user will then be able to use the Menu control to navigate your site.
2.7.2. What about...
...creating the items in the Menu control declaratively?
Besides binding the Menu control to an XML file or a site map, you can also create the items in the Menu control manually. You can either use the Menu Item Editor (found in the Menu Tasks menu by selecting Edit Menu Items...), as shown in Figure 2-45, or you can add in the items declaratively.
Figure 2-45. Using the Menu Item Editor to manually add items in the Menu control
To declaratively add menu items, drag and drop a Menu control onto the form and switch to Source View. Example 2-11 shows how to implement the menu structure shown in Figure 2-45.
Example 2-11. Adding menu items declaratively
<asp:Menu Target="newWindow" runat="server"> <Items> <asp:MenuItem Value="Windows" Text="Windows"> <asp:MenuItem Value="Windows XP" Text="Windows XP"> <asp:MenuItem Value="Home Edition" Text="Home Edition" navigateurl="xphome.aspx"> </asp:MenuItem> <asp:MenuItem Value="Professional" Text="Professional" navigateurl="xpprof.aspx"> </asp:MenuItem> </asp:MenuItem> <asp:MenuItem Value="Windows 2003 Server" Text="Windows 2003 Server" navigateurl="win2003.aspx"> </asp:MenuItem> </asp:MenuItem> </Items> </asp:Menu>
Tip: To open a new window when a menu item is selected, set the Target attribute to some value. Note that the Target attribute is supported in both the <Menu> and the <MenuItem> elements. If you specify a target at the menu level, all menu items will default to the specified target, unless you specifically override the target for each individual menu item. If the Target attribute is not set (or set to an empty string), the target will then be the current page.Note that opening a new window is likely to be confusing to the person browsing the page, unless the menu item is clearly pointing to an external page or site.
2.7.3. Where can I learn more?
To learn how to create menus using client-side scripts, check out the following sites: