ASP.NET - Problems with Static Selected Style for a Selected Page on the Menu

asp.NET - Problems with Static Selected Style for a Selected Page on the menu

This seems to be a bug with the .NET menu. There is some information regarding this here. What you might want to do then is remove the staticSelectedStyle attribute and simply add this to your css:

.menu a.static.selected
{
    background-color: #680840 !important;
    color: #FFF !important;
    text-decoration: none !important;
}

You might also have to add some code to your master's page load to determine which should be the selected item like this:

protected void Page_Load(object sender, EventArgs e)
{
    string path = Request.AppRelativeCurrentExecutionFilePath;
    foreach (MenuItem item in NavigationMenu.Items)
    {
        item.Selected = item.NavigateUrl.Equals(path, StringComparison.InvariantCultureIgnoreCase);
    }
}

How to apply the style for selected menu item in ASP.NET 3.5?

There is a tricky way to do that..when you select a menu item on the code behind of the master page, check for the local URL path and change the background of the selected menu item based on Local URL which is Unique. and call that method in div class property using Eval Expression so that it will change the background of the selected menu item dynamically..

Let me know if you need more detail..

asp:Menu and css selected item

If you run your .aspx page and examine the source you will notice that the menu item <a> (hyperlink) tag has a selected class called a.selected.static you can implement your own version of this in your code and override it by applying !important to the CSS class.

The sample below displays a simple menu with image menu items and highlights the image with a red border when selected:

<head runat="server">
    <title>Menu</title>
    <style type="text/css">
        a.selected.static
        {
            border:2px solid red !important;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:Menu ID="Menu1" runat="server" Orientation="Horizontal">
        <Items>
            <asp:MenuItem ImageUrl="~/Images/1.jpg" Text="Item 1" />
            <asp:MenuItem ImageUrl="~/Images/2.jpg" Text="Item 2" />
            <asp:MenuItem ImageUrl="~/Images/3.jpg" Text="Item 3" />
        </Items>
    </asp:Menu>
    </form>
</body>

ASP.NET highlight selected MenuItem

Have a look at the fiddle I have created for you.

Otherwise, could not really find the specific problem with your code.

.nav_style
 {
     list-style:none;
     font:14px calibri;
     background-color: none;
     padding: 10px;
 }
.nav_style:hover
 {
     background-color:red;
 }
.selected .nav_style{
    background-color: yellow;
 }

As you see I have used .selected .nav_style to highlight the selected tab. Give that a shot.

Oh.. and I haven't touched your markup. So, the styles should work.

Web Usercontrol menu item dynamic selected style not working

2, The codebehind of the menuitemclick event:

protected void Menu1_MenuItemClick(object sender, MenuEventArgs e)
{
    Session["Selected"] = e.Item.Text;
    if (e.Item.Text == "Page1")
    {
        Response.Redirect("~/menu/default.aspx");
    }
    else if(e.Item.Text == "Page2")
    {
        Response.Redirect("~/menu/default2.aspx");
    }
    else if (e.Item.Text == "Page3")
    {
        Response.Redirect("~/menu/default3.aspx");
    }
}

page load on user control

protected void Page_Load(object sender, EventArgs e)
{
    if (Session["Selected"] != null)
    {
        for (int i = 0; i < this.Menu1.Items.Count; i++)
        {
            if (this.Menu1.Items[i].Text == Session["Selected"].ToString())
            {
                this.Menu1.Items[i].Selected = true;
            }
        }
    }
}

How to style an asp.net menu with CSS

Alright, so there are obviously not a whole lot of people who have tried the .NET 4 menu as of today. Not surprising as the final version was released a couple days ago. I seem to be the first one to ever report on what seems to be a bug. I will report this to MS if I find the time, but given MS track-record of not paying attention to bug reports I'm not rushing this.

Anyway, at this point the least worst solution is to copy and paste the CSS styles generated by the control (check the header) into your own stylesheet and modify it from there. After you're done doing this, don't forget to set IncludeStyleBlock="False" on your menu so as to prevent the automatic generation of the CSS, since we'll be using the copied block from now on. Conceptually this is not correct as your application shouldn't rely on automatically generated code, but that's the only option I can think of.

StaticMenuItemStyle vs. StaticSelectedStyle - Does one overwrite the other?

The trick is to use a CssClass, and apply the CSS only to the hyperlink (the "a" elenent) and not to the surrounding HTML table that ASP.NET uses to show a menu item. Here's a self-contained code sample illustrating the behavior you're looking for:

<%@ Page Language="C#"%>
<!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">
    <style type="text/css">
    .notSelected a
    {
        text-decoration:underline;
    }
    .selected a
    {
        font-weight:bold;
        text-decoration:none;
    }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:menu id="myMenu" runat="server">
            <StaticMenuItemStyle CssClass="notSelected" />
            <StaticSelectedStyle CssClass="selected" />
            <Items>
                <asp:MenuItem Text="Test (selected)" Selected="true" NavigateUrl="~/Default.aspx"></asp:MenuItem>
                <asp:MenuItem Text="Test (not selected)" NavigateUrl="~/Default.aspx"></asp:MenuItem>
            </Items>
        </asp:menu>
    </div>
    </form>
</body>
</html>

The underlying cause of this problem seems to be how browsers handle multiple conflicting text-decoration styles defined in different CSS classes applied to the same A elements, and perhaps also how browsers handle inheritance from a parent which also has the same styles applied. (ASP.NET's menu controls use CSS classes under the hood to define "inline" styles like the font-underline "attribute", and they apply the same styles on the A elements as the parent elements too. Take a look at View Source HTML emitted by my sample above, or by your code, to get a better idea of how it works.)

I stumbled upon the nested CSS trick somewhat by accident, as I was trying to narrow down the causes of the problem. Seems that if you apply CSS to only the A elements, combining works better. You can probably deduce, by experiment, the underlying rules by doing a View Source on the generated HTML and selectively varying styles of CSS classes applied to each element.

You can also try to decipher the CSS spec for how inheritance and conflicts work with CSS classes, but I suspect experimentation will be easier. :-)

ASP.NET - Problems with Static Selected Style for a Selected Page on the Menu