Menu Control for the Beginners.

Introduction

The Menu control is used to display expandable menu. You can use this menu to navigate to different pages of your site. When the cursor hovers over the menu, a node that contains child nodes is found to be expanded.  Here, I have shown all the steps in details for a beginner, who is using this Menu control for the first time.
I have dealt with the Text property and NavigateUrl property of the Menu control. The value of the Text property is displayed in the Menu control. If the NavigateUrl property of a menu item is set, the Menu control navigates to the linked page.

Two types of menus are displayed by the Menu control.

a.    A Static Menu
b.    A Dynamic Menu
The static menu is displayed in a Menu control. The menu items at the root level i.e., level 0 are displayed in the static menu.
A dynamic menu appears only when the cursor hovers over the parent menu item that contains a submenu.

Here I am going to show u how to create two menu items and link them with respective pages. For that I need to create two Web Forms:
i)    Home.aspx
ii)    AboutUs.aspx

 

Let me cite an example to explain Static Menu.
Now select a Menu Control from the Navigation Tab in the toolbox.
Drag a Menu control from Navigation Tab into your Default.aspx page.


 
 

Static Menu

Menu control is now shown in the Design View of the Default.aspx.
Select and click at Smart Tag (>) symbol at the top right of the Menu Control.
Click at AutoFormat.
Here Classic format is selected at Auto Format window.

 
 
Now click at Edit Menu Items.

On clicking at Edit Menu Items, Menu Item Editor window opens.

To add an item, you have to click at the icon which is just below the text ‘Items:’

 
 

Here I have shown this example with mainly two properties.
One is the Text Property and the other is the NavigationUrl Property.
Click on the icon just below Items.
An item named New Item is created.
Select the New Item from the Menu Item Editor window.

Type Home in the Text property. That is type the text which is to be displayed in the menu item. Click at the Browse button of the NavigateUrl property also.



 


Select the Home.aspx page, bcoz we want the users to navigate to the Home.aspx page when he/she clicks on the Home menu.

Now type AboutUs in the Text property of the next New Item
Click at the Browse button of the NavigateUrl property now.
Select AboutUs.aspx from the SelectURL window.
Now AboutUs.aspx is selected. And click at the OK Button.
 

The Menu control looks like this now.
If it is needed to be horizontally placed, right click on the Menu Control->Properties Orientation-> Horizontal.


 



Now see the menu control which has been horizontally placed.

Dynamic Menu

Now let’s understand the Dynamic Menu using my Example. Suppose, I want to add a sub-menu under Home menu. Select the Home menu in the Menu Item Editor window.

Now click on the child Item icon for adding sub-menus.

To navigate to two different pages on clicking at two new sub-menus, we need to create two new WebForms:
i)    Home1.aspx
ii)   Home2.aspx

Now the first child Item is named as HomeOne and its Text property is set to HomeOne and NavigateUrl property is set to Home1.aspx

Now the second child item is added to the Home item and its Text and NavigateUrl properties are set respectively. At last click on OK.

 


Press F5 and view the output in the Browser.

On clicking at Home menu, we will be navigated to Home.aspx page.

Select HomeOne which is a child menu.

 

On Clicking the HomeOne child menu, we will be navigated to Home1.aspx.


 
This is the way by which we can navigate using Menu Control.