This article explains how to create a master page in ASP.NET 4.5 and using the creating CSS and jQuery menu bar.
So, let's proceed with the following procedure:
- Create a Master Pages Layout and ASP.NET web page
- Create CSS and jQuery menu bar
See the following screen “Home.aspx” layout:
![Master Page Layout]()
Create a new project using "File" -> "New" -> "Project..." then select web "ASP.NET Web Forms Application". Name it "MasterTemp".
![Create a new project]()
Creating a Master Page
Go to Solution Explorer then right-click on your application then select "Add New Item" then select "Master Page" and name it “Site.Master”.
![Master Page]()
The content page, that uses a Master Page is given below:
<%@ MasterLanguage="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="MasterTemp.Site1" %>
<!DOCTYPEhtml>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form2" runat="server">
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
Creating and using CSS in Master Page
Go to Solution Explorer then right-click on your application then select "Add New Item" then select "Style sheet" and name it “Site.css”.
![CSS in Master Page]()
Implementation: Let's create an application to see the master page layout working.
In the Site.css styles are the following: body, page, header, main, footer and topnav (Menu).
Site.css
body
{
font-size: .80em;
height: auto;
width: 100%;
font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
margin: 0px;
padding: 0px;
background: #dde4e9;
}
a:hover
{
color: Blue;
}
h1, h2, h3, h4, h5, h6
{
font-size: 1.5em;
color: #666666;
font-variant: small-caps;
text-transform: none;
font-weight: 200;
margin-bottom: 0px;
}
h1
{
font-size: 1.6em;
padding-bottom: 0px;
margin-bottom: 0px;
}
h2
{
font-size: 1.5em;
font-weight: 600;
}
h3
{
font-size: 1.2em;
}
h4
{
font-size: 1.1em;
}
h5, h6
{
font-size: 1em;
color: White;
}
.page
{
min-width: 1000px;
max-width: 1024px;
background-color: #FFFFFF;
margin: 0pxauto0pxauto;
border: 0pxsolid#496077;
}
.header
{
position: relative;
margin: 0px;
padding: 0px;
width: 100%;
height: 100px;
top: 0px;
left: 0px;
border-top:5pxsolid#FF4500;
border-top-style:outset;
background-image: -ms-linear-gradient(bottom,#FFFFFF0%,#F0EDED100%);
background-image: -moz-linear-gradient(bottom,#FFFFFF0%,#F0EDED100%);
background-image: -o-linear-gradient(bottom,#FFFFFF0%,#F0EDED100%);
background-image: -webkit-gradient(linear,leftbottom,lefttop,color-stop(0,#FFFFFF),color-stop(1,#F0EDED));
background-image: -webkit-linear-gradient(bottom,#FFFFFF0%,#F0EDED100%);
background-image: linear-gradient(totop,#FFFFFF0%,#F0EDED100%);
}
.headerh1
{
border-style: none;
border-color: inherit;
border-width: medium;
font-weight:200;
margin: 25px;
padding: 0px0px0px20px;
color:#007fff;
line-height: 2em;
font-size: 2em;
}
.title
{
display: block;
float: left;
text-align: left;
width: auto;
}
.main
{
padding: 0px12px;
margin: 8px8px8px8px;
min-height: 500px;
background-color: White;
}
.footer
{
color: #EEE;
padding: 0px0px0px0px;
margin: 0pxauto;
margin-top: 10px;
height: 50px;
text-align: center;
line-height: normal;
background-color: #007fff;
background: #000000;
}
.clear
{
clear: both;
height: 1px;
}
.button
{
display: inline-block;
width: 100px;
font-family: TimesNewRoman;
font-weight: bold;
font-size: 14px;
text-align: center;
padding: 5px;
border: 0px#D7D7D7solid;
text-align: center;
text-decoration: none;
color: White;
margin: 5px;
background-color: #001940;
cursor: pointer;
}
.button:hover
{
background: #000;
text-decoration: none;
}
.button:active
{
background: #001940;
}
.txt, .textarea
{
padding: 8px;
border: solid1px#E5E5E5;
font: normal12pxVerdana, Tahoma, sans-serif;
width: 200px;
margin: 5px;
}
.left
{
border-left: 0pxsolidred;
border-right: 0pxsolidred;
border-top: 0pxsolidred;
float: left;
width: 32%;
margin-left: 10px;
background-color: #F2F5F9;
margin-bottom: 10px;
}
.font
{
font-size: 11px;
font-family: Verdana;
color: #800000;
}
.text
{
font-family: Verdana;
font-size: 13px;
font-variant: inherit;
font-weight: normal;
margin-bottom: 5px;
color: #000000;
}
.accordion_headings
{
padding: 5px;
background: #33CCCC;
color: #000000;
-moz-box-shadow: 3px3px5px#535353;
-webkit-box-shadow: 3px3px5px#535353;
box-shadow: 3px3px5px#535353;
-moz-border-radius: 6px6px6px6px;
-webkit-border-radius: 6px;
border-radius: 6px6px6px6px;
border: 1pxsolid#3a2d00;
cursor: pointer;
font-weight: normal;
height: 23px;
margin-top: 1px;
font-family: 'Copperplate Gothic Bold';
font-size: 20px;
font-style: normal;
}
p
{
margin-top: -5px;
margin-left: 25px;
color: Yellow;
font-size: 20px;
}
ul#topnav
{
margin: 0;
padding: 0;
float: left;
min-width: 1024px;
max-width: 1024px;
list-style: none;
position: relative;
font-size: 1.2em;
background-color: #9fd2e5;
background: #f0f0f0;
font-family:'Times New Roman';
font-variant:small-caps;
text-transform: none;
font-weight:900;
margin-bottom: 0px;
}
ul#topnavli
{
float: left;
margin: 0;
padding: 0;
}
ul#topnavlia
{
padding: 10px15px;
display: block;
color:Blue;
background: #f0f0f0;
text-decoration: none;
}
ul#topnavlia:hover
{
background: #f0f0f0;
}
ul#topnavli:hover
{
background: #1376c9repeat-x; background: #f0f0f0;
}
ul#topnavlispan
{
float: left;
padding: 15px;
margin-top: 5px;
position: absolute;
left: 0;
top: 35px;
display: none;
width: 994px;
color:black;
background: #DDE4E9;
-moz-border-radius-bottomright: 5px;
-khtml-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-khtml-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
}
ul#topnavli:hoverspan
{
display: block; background: #DDE4E9;
}
ul#topnavlispana
{
display: inline;color:black; background: #DDE4E9;
}
ul#topnavlispana:hover
{
text-decoration: none; color:red; background: #DDE4E9;
}
Now, the code behind file "Site.Master" uses the following code. I have also used the jQuery Menu bar and Content Placeholder used.
Site.Master
<%@MasterLanguage="C#"AutoEventWireup="true"CodeBehind="Site.master.cs"Inherits="MasterTemp.Site"%>
<!DOCTYPEhtml>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title>
<asp:ContentPlaceHolderID="titleContent"runat="server"/>
</title>
<scriptsrc="Scripts/jquery.js"></script>
<linkhref="Styles/Site.css"rel="stylesheet"/>
<asp:ContentPlaceHolderID="head"runat="server">
</asp:ContentPlaceHolder>
<scripttype="text/javascript">
$(document).ready(function () {
$("ul#topnav li").hover(function () {
$(this).css({ 'background': '#f0f0f0'});
$(this).find("span").show();
}, function () {
$(this).css({'background': 'none' });
$(this).find("span").hide();
});
});
</script>
</head>
<body>
<formid="form1"runat="server">
<divclass="page">
<divclass="header">
<divclass="title">
<h1>C# Sharp Corner
</h1>
</div>
</div>
<ulid="topnav">
<li><aid="A1"href="#"runat="server">Home</a></li>
<li>
<aid="A2"href="#"runat="server">About</a>
<span>
<aid="A3"href="#"runat="server">Sub Menu 1</a> |
<aid="A4"href="#"runat="server">Sub Menu 2</a> |
<aid="A5"href="#"runat="server">Sub Menu 3</a>
</span>
</li>
<li>
<aid="A6"href="#"runat="server">Services</a>
<span>
<aid="A7"href="#"runat="server">Sub Menu 1</a> |
<aid="A8"href="#"runat="server">Sub Menu 2</a> |
<aid="A9"href="#"runat="server">Sub Menu 3</a>
</span>
</li>
<li>
<aid="A10"href="#"runat="server">Portfolio</a>
<span>
<aid="A11"href="#"runat="server">Sub Menu 1</a> |
<aid="A12"href="#"runat="server">Sub Menu 2</a> |
<aid="A13"href="#"runat="server">Sub Menu 3</a> |
<aid="A14"href="#"runat="server">Sub Menu 1</a> |
<aid="A15"href="#"runat="server">Sub Menu 2</a> |
<aid="A17"href="#"runat="server">Sub Menu 3</a>
</span>
</li>
<li><aid="A16"href="#"runat="server">Contact</a></li>
</ul>
<divclass="main">
<asp:ContentPlaceHolderID="MainContent"runat="server">
</asp:ContentPlaceHolder>
</div>
<divclass="clear">
</div>
<divclass="footer">
<br/>
Copyright @ 2014
<asp:HyperLinkID="HyperLink1"runat="server"NavigateUrl="http://www.c-sharpcorner.com/"
Target="_blank"ForeColor="Orange"Style="text-decoration: none"> C# Corner </asp:HyperLink>
All Rights Reserved.
</div>
</div>
</form>
</body>
</html>
Now, go to Solution Explorer then right-click on your application then select "Add New Item" then select "Web form using Master Page" and name it “Home.aspx”. Next add click.
![Web from using Master Page]()
Now, select a Master Page; just click "OK".
![Select a Master Page]()
Now, in the code behind file "Home.aspx.cs" use the following code.
<%@PageTitle=""Language="C#"MasterPageFile="~/Site.Master"AutoEventWireup="true"CodeBehind="Home.aspx.cs"Inherits="MasterTemp.Home"%>
<asp:ContentID="Content1"ContentPlaceHolderID="titleContent"runat="server">Home
</asp:Content>
<asp:ContentID="Content2"ContentPlaceHolderID="head"runat="server">
</asp:Content>
<asp:ContentID="Content3"ContentPlaceHolderID="MainContent"runat="server">
</asp:Content>
Now run the page, it will look like this:
![run the page]()
Design a master page in ASP.NET 4.5 using CSS and jQuery Menu bar menu/submenu. I hope you enjoyed this article. If you have any other questions then please provide your comments below.