Now here in this tutorial, I’ll explain how you can use asp.net menu control in your master page to navigate through pages in asp.net with example code.
In my previous tutorials, I’d explained asp.net breadcrumb or sitemappath example, how to show alert message from code-behind, how to call javascript function from code-behind and more cracking tutorials on Asp.net, JavaScript and jQuery here.
Asp.net Menu Control feature provides a consistent way for your website users to navigate your website. If you want to use navigation menu control in your website, then follow these easy steps.
Note: If you have existing project or website, ignore following two steps.
- Create new website or project
- To test example, create 1 .master page plus 4 or 5 .aspx pages. Here I’m using Default.aspx, HTML.aspx, HtmlTagList.aspx, CSS.aspx, CssSelectors.aspx these 5 pages with Site.master page for this demo but you can use as many as you want to showup in website navigation menu
You can add Menu control to your .master page by simply drag and drop from ToolBox > Navigation > Menu or add the following few lines of code snippet.
<Items>
<asp:MenuItem Text=”HOME” NavigateUrl=”~/Default.aspx” Selected=”true” />
<asp:MenuItem Text=”HTML” NavigateUrl=”~/HTML.aspx”>
<asp:MenuItem Text=”HtmlTagList” NavigateUrl=”~/HtmlTagList.aspx” />
</asp:MenuItem>
<asp:MenuItem Text=”CSS” NavigateUrl=”~/CSS.aspx”>
<asp:MenuItem Text=”CssSelectors” NavigateUrl=”~/CssSelectors.aspx” />
</asp:MenuItem>
</Items>
</asp:Menu>
From above example code, I’d used Orientation=”Horizontal” to display menu horizontally. The Orientation property of the Menu Control sets the menu display layout on the webpage, either “horizontal” or “vertical” display.
Asp.net Menu Control Example – [Site.master]
For example, here is my Site.master page which includes asp.net menu control:
<head id=”Head1″ runat=”server”>
<title>Asp.net Menu Navigation Countrol Example</title>
<asp:ContentPlaceHolder ID=”head” runat=”server”>
</asp:ContentPlaceHolder>
</head>
<body style=”width: 600px; margin: 20px auto; border: 1px solid #222;”>
<form id=”form1″ runat=”server”>
<div style=”width: 30%; margin: 20px auto;”>
<asp:Menu ID=”Menu1″ runat=”server” Orientation=”Horizontal”>
<Items>
<asp:MenuItem Text=”HOME” NavigateUrl=”~/Default.aspx” Selected=”true” />
<asp:MenuItem Text=”HTML” NavigateUrl=”~/HTML.aspx”>
<asp:MenuItem Text=”HtmlTagList” NavigateUrl=”~/HtmlTagList.aspx” />
</asp:MenuItem>
<asp:MenuItem Text=”CSS” NavigateUrl=”~/CSS.aspx”>
<asp:MenuItem Text=”CssSelectors” NavigateUrl=”~/CssSelectors.aspx” />
</asp:MenuItem>
</Items>
</asp:Menu>
</div>
<div style=”width: 90%; height: 300px; margin: 10px auto;”>
<hr />
<asp:ContentPlaceHolder ID=”ContentPlaceHolder1″ runat=”server”>
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
Example Result
Nice tips. Thank you.
Here is what I don’t understand. Every example of menu control shows users how to use a style that most people do not use.
When will someone provide an example of the style similar to what this website uses???
I know it can be done in JavaScript, but that is besides the point.
When I search for something I like to see useful results.
The menus are not. Home -> Subcontent…. etc…
The menu us
HOME
Sub Content
Sub Content
Or horizontal in nature.
I’d like to see a sample of this using Menu Control for horizontal and vertical menu that have sub menus as well.
If this is not possible then MS should rename this to something else because that old style is not going to do it with todays website styles especially when dealing with mobile and touch screens.
i am not know HTML can i get the code in C#
Thank you