Adding Menu Control
Explains what menu controls are and how to create them
- Click on the master page tab to make it visible. We will place the menu on the master page so that it will be available automatically in all the content pages.
- We are interested in the cell intended for menu (marked as `Site Menu', the first cell in the second row of the table). Delete the existing text.
- In the `Data' section of the toolbox, look for the `SiteMapDataSource' control. Generally, it is located at the end of the section. Drag this control using the mouse and drop it in the cell. The `SiteMapDataSource' control will be visible on the page. However, it is visible only while we are developing the page. When a user browses the page, this control will not be visible.
Now we need to access the `Menu' control. It is available in the `Navigation' section of the toolbar. Drag it and drop it just below the SiteMapDataSource control.
As soon as we drop the Menu control on the page, the smart tag for the control opens up.
From the `Choose Data Source' drop-down list, select `SiteMapDataSource1' option.
The menu has been added to our site! Since it is on the master page, it will be available on all content pages as well.
Save the project and then run it. We can see the menu with the title `Home'.
Move the mouse pointer on the `Home' menu. A submenu with the names of the other pages of our site will appear. Click on a menu item to go to that page. Also, note that if we keep the mouse pointer on a menu item for a while, the description of the page shows up on a Tool-tip.
Finally, we are going to make the menu look a little bit nicer. To do this, click on the smart tag button (the little black arrow) of the Menu control. In the box, click on the Auto Format option.
In the dialog box that appears, a list of different menu styles are given. We can select a style and the menu will change accordingly.
After selecting a style, click on the OK button. Close the smart tag dialog by clicking on the smart tag arrow or by clicking outside the dialog box.
Run the page again. Our newly formatted menu will appear on the page.
We have just designed a menu system for our site by typing a few lines of XML code!
