Asp Menu Item- styling

amyw_ftdna

New member
Joined
Feb 23, 2012
Messages
4
Location
Houston, Texas, United States
Programming Experience
1-3
I have a few issues that I am trying to over come with the asp menu control. The main thing I am working on now is... Whenever you click on the menuItem a pink line appears around the MenuItem then goes away once the new page comes up. I've seen this where and image is a link but is usually fixed by setting the border: none;

Sort of stumped here.. any advice is appreciated.

code follows

<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false"
IncludeStyleBlock="false" Orientation="Horizontal">
<Items>
<asp:MenuItem NavigateUrl="/dashboard.aspx" Text="Home" />
<asp:MenuItem NavigateUrl="/about.aspx" Text="About" />
<asp:MenuItem NavigateUrl="/profile.aspx" Text="My Profile" >
<asp:MenuItem NavigateUrl="/editMyProfile.aspx" Text="Edit My Profile" />
<asp:MenuItem NavigateUrl="/profileSettings.aspx" Text="Profile Settings" />
<asp:MenuItem NavigateUrl="/personalSettings.aspx" Text="Personal Settings" />
</asp:MenuItem>
<asp:MenuItem NavigateUrl="/results.aspx" Text="Results">
<asp:MenuItem NavigateUrl="/matches.aspx" Text="Matches" />
<asp:MenuItem NavigateUrl="/ancestralOrigins.aspx" Text="Ancestral Origins" />
<asp:MenuItem NavigateUrl="/haplogroupOrigins.aspx" Text="Haplogroup Origins" />
</asp:MenuItem>
<asp:MenuItem NavigateUrl="/maps.aspx" Text="Maps" >
<asp:MenuItem NavigateUrl="/matchesMaps.aspx" Text="Matches Map" />
<asp:MenuItem NavigateUrl="/migrationMaps.aspx" Text="Migration Map" />
</asp:MenuItem>
<asp:MenuItem NavigateUrl="/resources.aspx" Text="Resources">
<asp:MenuItem NavigateUrl="/haplotree.aspx" Text="Haplo Tree" />
<asp:MenuItem NavigateUrl="/resources.aspx" Text="Research Paper" />
</asp:MenuItem>
<asp:MenuItem NavigateUrl="/contributors.aspx" Text="Contributors" />
<asp:MenuItem NavigateUrl="/default.aspx" Text="LOGOUT" />
</Items>
</asp:Menu>


THANX
 
The menu items renders as anchors (A tag), which you can style with anchor pseudo-classes, see for example CSS Pseudo-classes
If you see border now it must mean you current css styles is doing it, because that is not the default anchor style.
 
Actually the following contains my styles...

div.menu
{
margin: 0px;
padding: 0px 0px 4px 1px;
<%--width: 940px;--%>
height: 40px;
}
div.menu ul
{
list-style: none;
margin: 0px;
padding: 0px;
<%--display: block;--%>
<%--width: 940px;--%>
}
div.menu ul.static
{
<%--display: block;--%>
<%--width: 940px;--%>
}
div.menu ul.static li.static a.static, div.menu ul.static li.static a.static:visited
{

background-image: url(../img/navBG.png);
background-repeat: repeat-x;
background-color: <%= Accent[0]%>;
border-right: 1px solid <%= Accent[0]%>;
color:<%= Common[3]%>;
font-size: 14px;
display: block;
padding: 8px 33px 0px 32px;
text-decoration: none;
white-space: nowrap;
height: 40px;
}
div.menu ul.static li.static a.static:hover
{
background-color: <%= Main[2]%>;
color: <%= Common[2]%>;
text-decoration: none;
}
div.menu ul.static li.static a.static:active
{
background-color: <%= Main[3]%>;
color: <%= Common[3]%>;
text-decoration: none;
}
div.menu ul.dynamic li.dynamic a.dynamic, div.menu ul.dynamic li.dynamic a.dynamic:visited
{
background-image: none;
background-color: <%= Accent[0]%>;
color:<%= Common[3]%>;
font-size: 14px;
display: block;
padding: 8px 4px 0px 4px;
text-decoration: none;
white-space: nowrap;
height: 20px;
width: 121px;

}
div.menu ul.dynamic li.dynamic a.dynamic:hover
{
color: <%= Main[2]%>;
text-decoration: none;
}
div.menu ul.dynamic li.dynamic a.dynamic:active
{
background-color: <%= Accent[0]%>;
color: <%= Common[3]%>;
text-decoration: none;
}
div.menu ul.dynamic li.dynamic:last a.dynamic, div.menu ul.dynamic li.dynamic:last a.dynamic:visited
{

background-image: url(../img/footBG.png);
background-repeat: repeat-x;
background-color: <%= Accent[0]%>;
}
 
Color definitions

Page.Response.ContentType = "text/css";


Main.Add("#486901");
Main.Add("#618c03");
Main.Add("#74a609");
Main.Add("#a8bf75");


Accent.Add("#023b58");
Accent.Add("#016698");
Accent.Add("#0185c7");

Common.Add("#000000");
Common.Add("#363636");
Common.Add("#333333");
Common.Add("#ffffff");
 
Back
Top Bottom