0

I'm a frontend developer working with a seemingly incompetant .NET dev that cant seem to resolve why the ASP Menu control is not showing the selected menu item. The .NET developer sent me the following code. Is there some rules missing here that are need to enable the CSS?

Thanks in advance

Controller config

 <asp:Menu ID="mnuMaster" 
                          runat="server" 
                          DataSourceID="sitemapMaster" 
                          StaticDisplayLevels="1" 
                          MaximumDynamicDisplayLevels="0" 
                          Orientation="Horizontal" 
                          StaticEnableDefaultPopOutImage="False" 
                          CssSelectorClass="TopMainMenu" onmenuitemdatabound="mnuMaster_MenuItemDataBound"
                          StaticBottomSeparatorImageUrl="~/App_Themes/PCTools/Images/top_menu_separator.gif"
                          ></asp:Menu>

CSS selected classes

    .TopMainMenu .AspNet-Menu li a:active, .TopMainMenu li.AspNet-Menu-Selected a,.TopMainMenu li.AspNet-Menu-ChildSelected a,.TopMainMenu li.AspNet-Menu-ParentSelected a {
    background:url(Images/navbg.gif) repeat-x 0 -86px;
}
experimenter
  • 768
  • 1
  • 9
  • 30
  • Do you mean you are setting a specific css property/class on the currently navigated page? – Michael Christensen May 16 '11 at 13:44
  • Hi, yeah so im styling .AspNet-Menu-Selected etc which I assume is what the control adds to the selected menu item, but my styles arent showing and when I view the source of the page it doesnt appear the control is adding the class to the selected item – experimenter May 16 '11 at 13:48
  • I think the menu control considers selected the one you have clicked while going into a sub item or hovering on. Im not 100% sure on that I'll post answer how I normally highlight the currently navigated tab – Michael Christensen May 16 '11 at 20:17

2 Answers2

0

We normally use a standard UL group in ordinary HTML that a designer provides and then make them into HTML Server Tags.

There may be other solutions but the solution we usually do is this.

First each top level menu item needs an ID.

If the menu is on a masterpage (im going to assume it is)

in the masterpage code behind you can place code like this.

//Discover currently navigated page TYPE
if (this.Page is `pagetype of the current page`)
    //add a CSS class to the top level menu item
    miFirstMenuItem.Attributes["class"] += " highlightedMenuItemCSSClass";

Then the HTML Output would append an additional CSS class to that menu item which you apply your specific style

Heres a real life example Node you would have to change the type in the SetActiveTab method to the correct type for the MenuItem

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            bool homeVisited        = Page is Default;
            bool productsVisited    = Page is Products_List;
            bool demoVisited        = Page is Demonstrations;
            bool contactVisited     = Page is Contact;

            if (homeVisited)
                SetActivePage(hlHome, ButtonSide.Left);
            if (productsVisited)
                SetActivePage(hlProducts, ButtonSide.Middle);
            if (demoVisited)
                SetActivePage(hlDemo, ButtonSide.Middle);
            if (contactVisited)
                SetActivePage(hlContact, ButtonSide.Right);

        }
    }

This shows a different way than I described above but you can replace it with link.Attributes["class"] += " cssClass"; Notice the space after the first ".

Also ButtonSide is an enum I added since all the middle menuitems would have the same CSS class in my particular case and left and right ones as well.

    private void SetActivePage(HyperLink link, ButtonSide side)
    {
        if (side == ButtonSide.Left)
            link.CssClass = "currentleft";
        if (side == ButtonSide.Middle)
            link.CssClass = "currentmiddle";
        if (side == ButtonSide.Right)
            link.CssClass = "currentright";
    }
Michael Christensen
  • 1,768
  • 1
  • 13
  • 11
  • Hi latr0dectus, thanks for your efforts with the code snippet however I believe we are restricted to using the ASP Menu controller. Have you had any experiencing using this controller and know what the issues might be? – experimenter May 17 '11 at 13:02
0

There seems to be a bug in VS201 / .Net4 where the CSS classnames you specify in de asp.menu properties StaticSelectedStyle & DynamicSelectedStyle are ignored. The menu always uses classname "selected".

Leo
  • 11
  • 1