how to set styles in selected menu item.

Hi Dinesh,

Refer to this code:

Master Page:

<head runat="server">
<title>title>
   <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
   <script src="jquery-1.6.2.js" type="text/javascript">script>
   <script type="text/javascript">
   $(document).ready(function () {
$(".menuLinks").click(function () {
$(".menuLinks").removeClass("selected");
});
});
script>
   <asp:ContentPlaceHolder ID="head" runat="server">
   asp:ContentPlaceHolder>
head>
<body>
<form id="form1" runat="server">
   <div>
   <ul class="menu">
   <li><a id="link1" class="menuLinks" href="Page1.aspx" runat="server">Link 1a>li>
   <li><a id="link2" class="menuLinks" href="Page2.aspx" runat="server">Link 2a>li>
   <li><a id="link3" class="menuLinks" href="Page3.aspx" runat="server">Link 3a>li>
   ul>
   <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
   asp:ContentPlaceHolder>
   div>
   form>
body>

StyleSheet.css :

ul.menu li
{
float: left;
list-style: none;
}
ul.menu li a
{
text-decoration: none;
font-family: Tahoma;
font-size: 20px;
margin: 0px 10px 0px 0px;
padding: 3px;
background-color: Black;
color: White;
border-radius: 5px;
}
ul.menu li a:hover
{
background-color: Blue !important;
}
ul.menu li a.selected
{
background-color: Blue !important;
}

Page1.aspx.cs :

protected void Page_Load(object sender, EventArgs e)
{
((HtmlAnchor)this.Page.Master.FindControl("link1")).Attributes.Add("class", "selected");
}

Page2.aspx.cs :

protected void Page_Load(object sender, EventArgs e)
{
((HtmlAnchor)this.Page.Master.FindControl("link2")).Attributes.Add("class", "selected");
}

Page3.aspx.cs :

protected void Page_Load(object sender, EventArgs e)
{
((HtmlAnchor)this.Page.Master.FindControl("link3")).Attributes.Add("class", "selected");
}

2 Replies

Know the answer? Post it — somebody with the same question will find it here.

Deepak Verma14y ago
Accepted answer
Hi Dinesh,

Refer to this code:

Master Page:

<head runat="server">
<title>title>
   <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
   <script src="jquery-1.6.2.js" type="text/javascript">script>
   <script type="text/javascript">
   $(document).ready(function () {
$(".menuLinks").click(function () {
$(".menuLinks").removeClass("selected");
});
});
script>
   <asp:ContentPlaceHolder ID="head" runat="server">
   asp:ContentPlaceHolder>
head>
<body>
<form id="form1" runat="server">
   <div>
   <ul class="menu">
   <li><a id="link1" class="menuLinks" href="Page1.aspx" runat="server">Link 1a>li>
   <li><a id="link2" class="menuLinks" href="Page2.aspx" runat="server">Link 2a>li>
   <li><a id="link3" class="menuLinks" href="Page3.aspx" runat="server">Link 3a>li>
   ul>
   <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
   asp:ContentPlaceHolder>
   div>
   form>
body>

StyleSheet.css :

ul.menu li
{
float: left;
list-style: none;
}
ul.menu li a
{
text-decoration: none;
font-family: Tahoma;
font-size: 20px;
margin: 0px 10px 0px 0px;
padding: 3px;
background-color: Black;
color: White;
border-radius: 5px;
}
ul.menu li a:hover
{
background-color: Blue !important;
}
ul.menu li a.selected
{
background-color: Blue !important;
}

Page1.aspx.cs :

protected void Page_Load(object sender, EventArgs e)
{
((HtmlAnchor)this.Page.Master.FindControl("link1")).Attributes.Add("class", "selected");
}

Page2.aspx.cs :

protected void Page_Load(object sender, EventArgs e)
{
((HtmlAnchor)this.Page.Master.FindControl("link2")).Attributes.Add("class", "selected");
}

Page3.aspx.cs :

protected void Page_Load(object sender, EventArgs e)
{
((HtmlAnchor)this.Page.Master.FindControl("link3")).Attributes.Add("class", "selected");
}
Dinesh Ambaliya14y ago
This will work. Thank you.