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

Master page with Menu Control in C# with Example

Jul 10, 2014

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


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

For 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="" >
<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 url="ContactUs.aspx" title="Contact US"  description="ContacUs Page" />
Now open Masterpage and write the following code

<html xmlns="">
<head runat="server">
<title>Master Page with Menu control in with example</title>
<asp:ContentPlaceHolder id="head" runat="server">
<style type="text/css">
width: 110px;
background-color: #8AE0F2;
color: #000;
text-align: center;
height: 30px;
margin-right: 5px;
width: 110px;
background-color: #000;
color: #fff;
text-align: center;
height: 30px;
line-height: 30px;

width: 110px;
background-color: #000;
color: #fff;
text-align: center;
height: 30px;
line-height: 30px;
margin-top: 5px;
background-color: #FF6600;
background-color: #990000;
<form id="form1" runat="server">
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="false" />
<asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1" Orientation="Horizontal">
<asp:MenuItemStyle CssClass="parent_menu" />
<asp:MenuItemStyle CssClass="child_menu" />
<DynamicMenuItemStyle CssClass="sub_menu" />
<DynamicHoverStyle CssClass="hover_menu" />
<StaticSelectedStyle CssClass="selected_menu" />
<StaticHoverStyle CssClass="hover_menu" />
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
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">

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,, 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


Anonymous said...

sry its asking data provider how to give that

dinez kumar said...

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


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

Rakesh Chavda said...

sir pls send me link for login page contact with master page in

Divyang Desai said...

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

Give your Valuable Comments

Other Related Posts

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