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 Email
|
|||
12 comments :
sry its asking data provider how to give that
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
sir pls send me link for login page contact with master page in c#.net
How we added smooth effect in menu hover with using jquery ?
Very Useful. I just wanted to know how to center Menu across the page.
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
useful blog .. but color is not changing on mouse hover
how can i hide the menu bar before user login ?
HI i also have the same question, how to disable to click the menu bar on master page before user login?
its showing error
Color is not changed
Note: Only a member of this blog may post a comment.