locked
.AspNet-Menu-Selected Problems RRS feed

  • Question

  • User317896122 posted

    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
    {
        ;
        font-family:Arial;
        text-align:left;
    }


    ul.AspNet-Menu,
    ul.AspNet-Menu ul
    {
        margin: 0;
        padding: 0;
        display: block;
    }

    ul.AspNet-Menu li
    {
        ;
        list-style: none;
        float: left;
    }

    ul.AspNet-Menu li a,
    ul.AspNet-Menu li span
    {
        display: block;
        text-decoration: none;
    }

    ul.AspNet-Menu ul
    {
        ;
        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%;
        ;
    }

    .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- 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- center;
        background-attachment:scroll;
        padding: 0px 0px 0px 0px;
    }

    Wednesday, May 16, 2007 5:09 PM

All replies

  • User-534056067 posted

    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.

     

    Wednesday, May 16, 2007 9:27 PM
  • User317896122 posted

     That worked! Thanks.

    Thursday, May 17, 2007 9:54 AM
  • User1734075858 posted

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

    Tuesday, June 22, 2010 2:25 PM
  • User-534056067 posted

    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). 

    Wednesday, June 23, 2010 10:47 AM
  • User-534056067 posted

    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. 

    Wednesday, June 23, 2010 10:50 AM
  • User1734075858 posted

    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. 


    Wednesday, June 23, 2010 12:07 PM
  • User1734075858 posted

    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..


    Wednesday, June 23, 2010 1:33 PM
  • User1734075858 posted

    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. 

    Thursday, June 24, 2010 2:14 PM