I am trying to have the selected item in the menu be noticeable different than the other items. I am able to change the border as in the samples, but nothing else. I would like the selected font color to change as well as the background image / color.
Here is a sample page and style sheet. Any help is greatly appreciated.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
ul.AspNet-Menu li
{
position: relative;
list-style: none;
float: left;
}
ul.AspNet-Menu li a,
ul.AspNet-Menu li span
{
display: block;
text-decoration: none;
}
ul.AspNet-Menu ul
{
position: absolute;
visibility: hidden;
}
/* Add more rules here if your menus have more than three (3) tiers */
ul.AspNet-Menu li:hover ul ul,
ul.AspNet-Menu li.AspNet-Menu-Hover ul ul
{
visibility: hidden;
}
/* Add more rules here if your menus have more than three (3) tiers */
ul.AspNet-Menu li:hover ul,
ul.AspNet-Menu li li:hover ul,
ul.AspNet-Menu li li li:hover ul,
ul.AspNet-Menu li.AspNet-Menu-Hover ul,
ul.AspNet-Menu li li.AspNet-Menu-Hover ul,
ul.AspNet-Menu li li li.AspNet-Menu-Hover ul
{
visibility: visible;
}
.AspNet-Menu-Vertical ul.AspNet-Menu li
{
width: 100%;
}
.SimpleEntertainmentMenu ul.AspNet-Menu
{
width: 100%; /* This is more than (6em x 2) because we want to leave room for borders around the <li> elements that are selected */
text-align: center;
text-transform: uppercase;
left: 0%;
position: relative;
}
.SimpleEntertainmentMenu ul.AspNet-Menu ul ul /* Tier 3+ */
{
top: -0.5em;
left: 6em;
}
.SimpleEntertainmentMenu li /* all list items */
{
width:auto;
background: #eeeeee;
border-style: solid;
border-width: 0px;
border-right-width: 1px;
border-color: #0000e5;
text-align:center;
}
.SimpleEntertainmentMenu li:hover, /* list items being hovered over */
.SimpleEntertainmentMenu li.AspNet-Menu-Hover
{
background: Black;
text-transform:capitalize;
}
.SimpleEntertainmentMenu a, /* all anchors and spans (nodes with no link) */
.SimpleEntertainmentMenu span
{
padding: 6px 2px 2px 2px;
background: transparent right center no-repeat;
}
.SimpleEntertainmentMenu li.AspNet-Menu-Leaf a, .SimpleEntertainmentMenu li.AspNet-Menu-Leaf span
{
background-image: url(BlueLightBlue.png) !important;
background-repeat: repeat;
text-transform: capitalize;
font-weight: bold;
color: White !important;
}
.SimpleEntertainmentMenu li:hover a, /* hovered text */
.SimpleEntertainmentMenu li:hover span,
.SimpleEntertainmentMenu li.AspNet-Menu-Hover a,
.SimpleEntertainmentMenu li.AspNet-Menu-Hover span,
.SimpleEntertainmentMenu li:hover li:hover a,
.SimpleEntertainmentMenu li:hover li:hover span,
.SimpleEntertainmentMenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover a,
.SimpleEntertainmentMenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover span,
.SimpleEntertainmentMenu li:hover li:hover li:hover a,
.SimpleEntertainmentMenu li:hover li:hover li:hover span,
.SimpleEntertainmentMenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover li.AspNet-Menu-Hover a,
.SimpleEntertainmentMenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover li.AspNet-Menu-Hover span
{
color: Yellow !important;
background-image: url(Blue-LightBlueR.png) !important;
background-repeat: repeat;
}
.SimpleEntertainmentMenu li:hover li a, /* the tier above this one is hovered */
.SimpleEntertainmentMenu li:hover li span,
.SimpleEntertainmentMenu li.AspNet-Menu-Hover li a,
.SimpleEntertainmentMenu li.AspNet-Menu-Hover li span,
.SimpleEntertainmentMenu li:hover li:hover li a,
.SimpleEntertainmentMenu li:hover li:hover li span,
.SimpleEntertainmentMenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover li a,
.SimpleEntertainmentMenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover li span
{
color: White !important;
background: transparent url(arrowRight.gif) right center no-repeat;
}
I've seen this sort of problem before. It sometimes happens when you have other rules in your style sheets that are more important than the ones you've defined here. To fix the problem you merely need to introduce additional CSS selectors that are more precise.
I happen to be the author of http://www.microsoft.com/expression (as well as this adapter kit). In the style sheet for the primary (first level) menu (with the yellow background) I use this rule:
.PrimaryNav ul li.AspNet-Menu-Selected,
.PrimaryNav ul li.AspNet-Menu-Selected a.AspNet-Menu-Selected,
.PrimaryNav ul li.AspNet-Menu-Selected span.AspNet-Menu-Selected
{
color: #dedede !important;
background: #444444;
}
Notice that my rules are purposely fairly precise. You might need to try something similar but substituting SimpleEntertainmentMenu for PrimaryNav.
By the way, the big clue here is that you can get some properties to work but not others. That nearly always means that you have other rules that are resetting (overriding) the cascade for the properties that are NOT working as you expected. As I said, the
fix is to force the cascade to do the right thing. Remember that !important won't always work, especially if you have other rules with !important on those same properties and with more precise CSS selectors. That's why you need to make sure that the selectors
you use for AspNet-Menu-Selected are super-precise!
Yes. (Trust me. I wrote these adapters originally and I'm currently using them on
http://www.microsoft.com/web, which is running as a .Net 4, ASP.NET 4 vroot/app).
Qualification to my previous reply... while
http://www.microsoft.com/web does use these adapters and is a .Net 4 site it does not use ALL of these adapters. For example, I'm not using the various membership control adapters (Login, etc.) on /web. So I can say with certainty that the Menu, GridView
and many others do work in .Net 4, I can't be certain about every single one of the adapters since I've not yet personally used them all under .Net 4.
Thank you. I will try using it as I'm having problem with the " VS 2010 CSS Selected Menu Item..(http://forums.asp.net/t/1571506.aspx).
I tried using external css style but the menu doesn't render anything to indicate the selected item. Even setting the explicit style doesn't help at all.
I also noticed that download link is broken or have been removed. Is Codeplex still hosting it or what? I want to download and use it for my VS 2010/Net 4.0 project..
I also noticed that download link is broken or have been removed. Is Codeplex still hosting it or what? I want to download and use it for my VS 2010/Net 4.0 project..
*Updated*
I was able to download the .zip folder but there's no where to download VSI which was mentioned in the walk-through.
None
0 Points
2 Posts
.AspNet-Menu-Selected Problems
May 16, 2007 05:09 PM|kalley82|LINK
I am trying to have the selected item in the menu be noticeable different than the other items. I am able to change the border as in the samples, but nothing else. I would like the selected font color to change as well as the background image / color. Here is a sample page and style sheet. Any help is greatly appreciated.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<link href="MainStyle.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div>
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%; height: 100%">
<tr>
<!-- Indention Pushes First Link Over -->
<td class="Indentation">
</td>
<!-- Menu -->
<td class="MenuRow" style="height: auto; text-align: left;">
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="False" />
<asp:Menu ID="EntertainmentMenu" runat="server" Orientation="Horizontal" CssSelectorClass="SimpleEntertainmentMenu"
DataSourceID="SiteMapDataSource1">
</asp:Menu>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
/**************** MENU Elements Style ****************/
ul.AspNet-Menu
{
position: relative;
font-family:Arial;
text-align:left;
}
ul.AspNet-Menu,
ul.AspNet-Menu ul
{
margin: 0;
padding: 0;
display: block;
}
ul.AspNet-Menu li
{
position: relative;
list-style: none;
float: left;
}
ul.AspNet-Menu li a,
ul.AspNet-Menu li span
{
display: block;
text-decoration: none;
}
ul.AspNet-Menu ul
{
position: absolute;
visibility: hidden;
}
/* Add more rules here if your menus have more than three (3) tiers */
ul.AspNet-Menu li:hover ul ul,
ul.AspNet-Menu li.AspNet-Menu-Hover ul ul
{
visibility: hidden;
}
/* Add more rules here if your menus have more than three (3) tiers */
ul.AspNet-Menu li:hover ul,
ul.AspNet-Menu li li:hover ul,
ul.AspNet-Menu li li li:hover ul,
ul.AspNet-Menu li.AspNet-Menu-Hover ul,
ul.AspNet-Menu li li.AspNet-Menu-Hover ul,
ul.AspNet-Menu li li li.AspNet-Menu-Hover ul
{
visibility: visible;
}
.AspNet-Menu-Vertical ul.AspNet-Menu li
{
width: 100%;
}
.SimpleEntertainmentMenu ul.AspNet-Menu
{
width: 100%; /* This is more than (6em x 2) because we want to leave room for borders around the <li> elements that are selected */
text-align: center;
text-transform: uppercase;
left: 0%;
position: relative;
}
.SimpleEntertainmentMenu ul.AspNet-Menu ul /* Tier 2 */
{
width: 6em;
top: 100%;
left: 0;
text-align:center;
}
.SimpleEntertainmentMenu ul.AspNet-Menu ul ul /* Tier 3+ */
{
top: -0.5em;
left: 6em;
}
.SimpleEntertainmentMenu li /* all list items */
{
width:auto;
background: #eeeeee;
border-style: solid;
border-width: 0px;
border-right-width: 1px;
border-color: #0000e5;
text-align:center;
}
.SimpleEntertainmentMenu li:hover, /* list items being hovered over */
.SimpleEntertainmentMenu li.AspNet-Menu-Hover
{
background: Black;
text-transform:capitalize;
}
.SimpleEntertainmentMenu a, /* all anchors and spans (nodes with no link) */
.SimpleEntertainmentMenu span
{
padding: 6px 2px 2px 2px;
background: transparent right center no-repeat;
}
.SimpleEntertainmentMenu li.AspNet-Menu-Leaf a, .SimpleEntertainmentMenu li.AspNet-Menu-Leaf span
{
background-image: url(BlueLightBlue.png) !important;
background-repeat: repeat;
text-transform: capitalize;
font-weight: bold;
color: White !important;
}
.SimpleEntertainmentMenu li:hover a, /* hovered text */
.SimpleEntertainmentMenu li:hover span,
.SimpleEntertainmentMenu li.AspNet-Menu-Hover a,
.SimpleEntertainmentMenu li.AspNet-Menu-Hover span,
.SimpleEntertainmentMenu li:hover li:hover a,
.SimpleEntertainmentMenu li:hover li:hover span,
.SimpleEntertainmentMenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover a,
.SimpleEntertainmentMenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover span,
.SimpleEntertainmentMenu li:hover li:hover li:hover a,
.SimpleEntertainmentMenu li:hover li:hover li:hover span,
.SimpleEntertainmentMenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover li.AspNet-Menu-Hover a,
.SimpleEntertainmentMenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover li.AspNet-Menu-Hover span
{
color: Yellow !important;
background-image: url(Blue-LightBlueR.png) !important;
background-repeat: repeat;
}
.SimpleEntertainmentMenu li:hover li a, /* the tier above this one is hovered */
.SimpleEntertainmentMenu li:hover li span,
.SimpleEntertainmentMenu li.AspNet-Menu-Hover li a,
.SimpleEntertainmentMenu li.AspNet-Menu-Hover li span,
.SimpleEntertainmentMenu li:hover li:hover li a,
.SimpleEntertainmentMenu li:hover li:hover li span,
.SimpleEntertainmentMenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover li a,
.SimpleEntertainmentMenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover li span
{
color: White !important;
background: transparent url(arrowRight.gif) right center no-repeat;
}
.SimpleEntertainmentMenu .AspNet-Menu-Selected
{
color: #000000 !important;
}
.SimpleEntertainmentMenu .AspNet-Menu-ChildSelected /* a tier below this one is selected */
{
border: solid 1px #ff0000 !important;
color: #000000 !important;
}
.SimpleEntertainmentMenu .AspNet-Menu-ParentSelected /* a tier above this one is selected */
{
border: solid 1px #00ffff !important;
color: #000000 !important;
}
/**************** MenuRow Style ****************/
.MenuRow
{
border: 1px Blue;
border-style:solid;
height: 100%;
width: 100%;
background-color: transparent;
background-image: url(BlueLightBlue.png);
background-repeat:repeat;
background-position: center center;
background-attachment:scroll;
padding: 0px 0px 0px 0px;
}
.Indentation
{
border-left: 1px Blue;
border-top: 1px Blue;
border-bottom: 1px Blue;
border-right: 0px Blue;
border-style:solid;
height: 100%;
width: 5%;
background-color: transparent;
background-image: url(BlueLightBlue.png);
background-repeat:repeat;
background-position: center center;
background-attachment:scroll;
padding: 0px 0px 0px 0px;
}
Member
290 Points
741 Posts
Re: .AspNet-Menu-Selected Problems
May 16, 2007 09:27 PM|Russ Helfand|LINK
I've seen this sort of problem before. It sometimes happens when you have other rules in your style sheets that are more important than the ones you've defined here. To fix the problem you merely need to introduce additional CSS selectors that are more precise. I happen to be the author of http://www.microsoft.com/expression (as well as this adapter kit). In the style sheet for the primary (first level) menu (with the yellow background) I use this rule:
.PrimaryNav ul li.AspNet-Menu-Selected,
.PrimaryNav ul li.AspNet-Menu-Selected a.AspNet-Menu-Selected,
.PrimaryNav ul li.AspNet-Menu-Selected span.AspNet-Menu-Selected
{
color: #dedede !important;
background: #444444;
}
Notice that my rules are purposely fairly precise. You might need to try something similar but substituting SimpleEntertainmentMenu for PrimaryNav.
By the way, the big clue here is that you can get some properties to work but not others. That nearly always means that you have other rules that are resetting (overriding) the cascade for the properties that are NOT working as you expected. As I said, the fix is to force the cascade to do the right thing. Remember that !important won't always work, especially if you have other rules with !important on those same properties and with more precise CSS selectors. That's why you need to make sure that the selectors you use for AspNet-Menu-Selected are super-precise!
Good luck.
Groovybits.com
None
0 Points
2 Posts
Re: .AspNet-Menu-Selected Problems
May 17, 2007 09:54 AM|kalley82|LINK
That worked! Thanks.
Member
2 Points
45 Posts
Re: .AspNet-Menu-Selected Problems
Jun 22, 2010 02:25 PM|jggarley|LINK
Can this adapter be used in Asp.net 4.0/VS 2010?
Member
290 Points
741 Posts
Re: .AspNet-Menu-Selected Problems
Jun 23, 2010 10:47 AM|Russ Helfand|LINK
Yes. (Trust me. I wrote these adapters originally and I'm currently using them on http://www.microsoft.com/web, which is running as a .Net 4, ASP.NET 4 vroot/app).
Groovybits.com
Member
290 Points
741 Posts
Re: .AspNet-Menu-Selected Problems
Jun 23, 2010 10:50 AM|Russ Helfand|LINK
Qualification to my previous reply... while http://www.microsoft.com/web does use these adapters and is a .Net 4 site it does not use ALL of these adapters. For example, I'm not using the various membership control adapters (Login, etc.) on /web. So I can say with certainty that the Menu, GridView and many others do work in .Net 4, I can't be certain about every single one of the adapters since I've not yet personally used them all under .Net 4.
Groovybits.com
Member
2 Points
45 Posts
Re: .AspNet-Menu-Selected Problems
Jun 23, 2010 12:07 PM|jggarley|LINK
Thank you. I will try using it as I'm having problem with the " VS 2010 CSS Selected Menu Item..(http://forums.asp.net/t/1571506.aspx). I tried using external css style but the menu doesn't render anything to indicate the selected item. Even setting the explicit style doesn't help at all.
Member
2 Points
45 Posts
Re: .AspNet-Menu-Selected Problems
Jun 23, 2010 01:33 PM|jggarley|LINK
I also noticed that download link is broken or have been removed. Is Codeplex still hosting it or what? I want to download and use it for my VS 2010/Net 4.0 project..
Member
2 Points
45 Posts
Re: .AspNet-Menu-Selected Problems
Jun 24, 2010 02:14 PM|jggarley|LINK
*Updated*
I was able to download the .zip folder but there's no where to download VSI which was mentioned in the walk-through.