CSS: Change the Menu HyperLink style programmatically

ASP.NET aspx file

<%@ Control Language=”C#” AutoEventWireup=”true” CodeFile=”DepartmentsList.ascx.cs” Inherits=”UserControls_DepartmentsList” %>
<asp:DataList ID=”list” runat=”server” CssClass=”DepartmentListContent”
Width=”200px”>
<HeaderTemplate>
Choose a Department
</HeaderTemplate>
<ItemTemplate>
&nbsp;&raquo;
<asp:HyperLink
ID=”HyperLink1″
Runat=”server”
NavigateUrl='<%# “../Catalog.aspx?DepartmentID=” + Eval(“DepartmentID”)%>’
Text='<%# Eval(“Name”) %>’
ToolTip='<%# Eval(“Description”) %>’
CssClass='<%# Eval(“DepartmentID”).ToString() ==
Request.QueryString[“DepartmentID”] ? “DepartmentSelected” :
“DepartmentUnselected”
%>’>
</asp:HyperLink>
&nbsp;&laquo;
</ItemTemplate>
<ItemStyle CssClass=”DepartmentListContent” />
<HeaderStyle CssClass=”DepartmentListHead” />
</asp:DataList>

 

CSS file

a.DepartmentUnselected
{
font-family: Verdana, Arial;
font-weight: bold;
font-size: 9pt;
color: #5f9ea0;
line-height: 25px;
padding-left: 5px;
text-decoration: none;
}
a.DepartmentUnselected:hover
{
padding-left: 5px;
color: #2e8b57;
}
a.DepartmentSelected
{
font-family: Verdana, Arial;
font-weight: bold;
font-size: 9pt;
color: #556b2f;
line-height: 25px;
padding-left: 5px;
text-decoration: none;
}

In the CSS file add this:

a.HyperLinkUnselected
{
    text-decoration: none;
    color: #FF0000;
    background-color: white;
}
a.HyperLinkUnselected:Hover
{
    background-color:white;
    color:Black
    text-decoration: underline;
}
a.HyperLinkSelected
{
    background-color:white;
    color:Black
    text-decoration: underline;
    font-weight:bold;
}

 

From the code behind file add the css class to HyperLink:

if (currentPage == i)
h.CssClass = “HyperLinkSelected”;
else
h.CssClass = “HyperLinkUnselected”;

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s