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

1 comments :

Anonymous said...

sry its asking data provider how to give that

Give your Valuable Comments

Other Related Posts

© 2010-2012 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.