.AspNet-Menu-Selected Problems : The Official Microsoft ASP.NET Forums

Reply

kalley82

0 Points

.AspNet-Menu-Selected Problems

May 16, 2007 09:09 PM|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>
                    
                    <td class="Indentation">
                    </td>
                    
                    <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;
}

Reply

Russ Helfand

Contributor

3304 Points

744 Posts

Re: .AspNet-Menu-Selected Problems

May 17, 2007 01:27 AM|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.

Russ Helfand
Groovybits.com

Reply

kalley82

0 Points

2 Posts

Re: .AspNet-Menu-Selected Problems

May 17, 2007 01:54 PM|LINK

That worked! Thanks.

Reply

jggarley

Member

28 Points

43 Posts

Re: .AspNet-Menu-Selected Problems

Jun 22, 2010 06:25 PM|LINK

Can this adapter be used in Asp.net 4.0/VS 2010?

Reply

Russ Helfand

Contributor

3304 Points

744 Posts

Re: .AspNet-Menu-Selected Problems

Jun 23, 2010 02:47 PM|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).

Russ Helfand
Groovybits.com

Reply

Russ Helfand

Contributor

3304 Points

744 Posts

Re: .AspNet-Menu-Selected Problems

Jun 23, 2010 02:50 PM|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.

Russ Helfand
Groovybits.com

Reply

jggarley

Member

28 Points

43 Posts

Re: .AspNet-Menu-Selected Problems

Jun 23, 2010 04:07 PM|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.

Reply

jggarley

Member

28 Points

43 Posts

Re: .AspNet-Menu-Selected Problems

Jun 23, 2010 05:33 PM|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..

Reply

jggarley

Member

28 Points

43 Posts

Re: .AspNet-Menu-Selected Problems

Jun 24, 2010 06:14 PM|LINK

jggarley

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.

.AspNet-Menu-Selected Problems RSS

8 replies

kalley82

.AspNet-Menu-Selected Problems

Russ Helfand

Re: .AspNet-Menu-Selected Problems

kalley82

Re: .AspNet-Menu-Selected Problems

jggarley

Re: .AspNet-Menu-Selected Problems

Russ Helfand

Re: .AspNet-Menu-Selected Problems

Russ Helfand

Re: .AspNet-Menu-Selected Problems

jggarley

Re: .AspNet-Menu-Selected Problems

jggarley

Re: .AspNet-Menu-Selected Problems

jggarley

Re: .AspNet-Menu-Selected Problems

jggarley

This site is managed for Microsoft by Neudesic, LLC. | © 2013 Microsoft. All rights reserved.

Follow Us On:

Microsoft