开发者

Why arent the "selected" classes not being set for ASP Menu control?

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=开发者_JAVA百科"~/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;
}


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";
    }


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

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜