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:
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
 |
No comments:
Post a Comment