Section 2.7. Display Drop-Down Menus Using the Menu Control

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.

1. Using the project created in the lab Section 2.5, add a Menu control (found in the Standard tab of the Toolbox) to the Master page and apply the "Colorful" theme (via the Auto Format... link in the MenuTasks menu) to change its look (see Figure 2-41).

   Figure 2-41. Customizing the Menu control

   
   
   

2. In the Menu Tasks of the Menu control, select SiteMapDataSource1 as its data source (see Figure 2-42). The SiteMapDataSource1 control was added when the TreeView control was configured earlier.

   Figure 2-42. Adding a Menu control to the Master page

   
   
   

3. To test the Menu control, press F5. You should now be able to navigate the site using the Menu control (see Figure 2-43).

   Figure 2-43. Testing the Menu control

   
   
   

4. Note that the Menu control supports two orientations: Horizontal and Vertical. Change the Orientation property of the Menu control from Vertical to Horizontal and observe the changes (see Figure 2-44).

   ---

   Tip: The default orientation of the Menu control is Vertical.

   ---

   Figure 2-44. Changing the Menu control orientation

   
   
   

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:

• http://dhtml-menu.com/menu-demos/demo117.html

• http://wsabstract.com/javatutors/crossmenu.shtml

• http://archive.devx.com/dhtml/articles/td041801/td041801-1.asp