Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

Master page with Menu Control in Asp.net C# with Example

Jul 10, 2014
Introduction:

Here I will explain how to create master page with menu in asp.net example or how to use asp.net menu control in master page to create menu and submenus. Here I will use sitemap and sitemapdatasource control to bind asp.net menu in master page.

Description:

In previous post I explained Breadcrumb example in asp.net, how to pass table as parameter to stored procedure, Add Fade in effect to webpage using JQuery and many articles relating to asp.net, JQuery, Ajax etc. Now I will explain how to create master page with menu in asp.net example.

For asp.net menu control we are going to use sitemap and sitemapdatasource control for that first create one new website once we created add master page, sitemap to your application by following below steps

Right click on website >> select Add New Item >> Select SiteMap >> Click OK

Same way we can add master page Right click on website >> Select Add New item >> Select Master Page >> Click OK

Once SiteMAP added to website open SiteMAP and write the following code


<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
<siteMapNode url="" title=""  description="">
<siteMapNode url="Default.aspx" title="Home"  description="Home Page"/>
<siteMapNode url="Forums.aspx" title="Forums"  description="Forums Page"/>
<siteMapNode url="Careers.aspx" title="Careers"  description="Careers Page" >
<siteMapNode url="Jobs.aspx" title="Jobs"  description="Jobs Page" />
<siteMapNode url="upload.aspx" title="Upload"  description="Upload Page" />
</siteMapNode>
<siteMapNode url="ContactUs.aspx" title="Contact US"  description="ContacUs Page" />
</siteMapNode>
</siteMap>
Now open Masterpage and write the following code


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Master Page with Menu control in asp.net with example</title>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
<style type="text/css">
.parent_menu
{
width: 110px;
background-color: #8AE0F2;
color: #000;
text-align: center;
height: 30px;
margin-right: 5px;
}
.child_menu
{
width: 110px;
background-color: #000;
color: #fff;
text-align: center;
height: 30px;
line-height: 30px;

}
.sub_menu
{
width: 110px;
background-color: #000;
color: #fff;
text-align: center;
height: 30px;
line-height: 30px;
margin-top: 5px;
}
.selected_menu
{
background-color: #FF6600;
}
.hover_menu
{
background-color: #990000;
color:#fff;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="false" />
<asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1" Orientation="Horizontal">
<LevelMenuItemStyles>
<asp:MenuItemStyle CssClass="parent_menu" />
</LevelMenuItemStyles>
<LevelSelectedStyles>
<asp:MenuItemStyle CssClass="child_menu" />
</LevelSelectedStyles>
<DynamicMenuItemStyle CssClass="sub_menu" />
<DynamicHoverStyle CssClass="hover_menu" />
<StaticSelectedStyle CssClass="selected_menu" />
<StaticHoverStyle CssClass="hover_menu" />
</asp:Menu>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
Now open Default.aspx page and add master page like as shown below


<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" MasterPageFile="~/MasterPage.master" %>
<asp:Content ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
</asp:Content>

Now run your application and check the output that will be like as shown below



Download Sample Code Attached


If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email

12 comments :

Anonymous said...

sry its asking data provider how to give that

Unknown said...

sir I want to display down arrow instead of side arrow in careers menu item

Unknown said...

working great but there is one problem when i hover on submenu its color not chenge , if i miss some css class or external class please point me
and How can i develop Dynamic menu on user rights

Unknown said...

sir pls send me link for login page contact with master page in c#.net

Unknown said...

How we added smooth effect in menu hover with using jquery ?

Anonymous said...

Very Useful. I just wanted to know how to center Menu across the page.

Unknown said...

hello,
very very nice... please help me.
click submenu then open alert box type window and enter password after open(redirect)page. can it's possible...
Submenus set password after open page in an ASP.NET Website

Unknown said...

useful blog .. but color is not changing on mouse hover

Anonymous said...

how can i hide the menu bar before user login ?

Anonymous said...

HI i also have the same question, how to disable to click the menu bar on master page before user login?

Unknown said...

its showing error

Phanindra Oruganti said...

Color is not changed

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.