Menu Control for the Beginners.

Ganeshji
Posted by in ASP.NET category on for Beginner level | Views : 10538 red flag
Rating: 4 out of 5  
 1 vote(s)

I have tried to give the steps for using the MENU control.

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.
 


Page copy protected against web site content infringement by Copyscape

About the Author

Ganeshji
Full Name: Zinnia Sarkar
Member Level:
Member Status: Member
Member Since: 7/24/2010 12:50:40 PM
Country: India
Regards, Ganeshji


Login to vote for this post.

Comments or Responses

Posted by: Akiii on: 8/15/2011 | Points: 25
good description of the menu control......
keep it up...

Thanks and Regards
Akiii
Posted by: Ganeshji on: 8/17/2011 | Points: 25
Thnx Akii! Reader's feedback inspires us to write more. Keep Reading and Enjoy!

Login to post response

Comment using Facebook(Author doesn't get notification)