开发者

Why menu Item is not selected after pressing it and open its page?

开发者 https://www.devze.com 2023-03-22 11:58 出处:网络
I wonder why About MenuItem is not selected (highlighted) after I pressed it! This is the default template of ASP.Net web application. Is there something ready or I have to implement it by my self?

I wonder why About MenuItem is not selected (highlighted) after I pressed it!

This is the default template of ASP.Net web application. Is there something ready or I have to implement it by my self?

Why menu Item is not selected after pressing it and open its page?

CSS:

/* TAB MENU   
----------------------------------------------------------*/
div.hideSkiplink
{
    background-color:#3a4f63;
    width:100%;
}

div.menu
{
    padding: 4px 0px 4px 8px;
}

div.menu ul
{
    list-style: none;
    margin: 0px;
    padding: 0px;
    width: auto;
}

div.menu ul li a, div.menu ul li a:visited
{
    background-color: #465c71;
    border: 1px #4e667d solid;
    color: #dde4ec;
    display: block;
    line-height: 1.35em;
    padding: 4px 20px;
    text-decoration: none;
    white-space: nowrap;
}

div.menu ul li a:hover
{
    background开发者_JAVA百科-color: #bfcbd6;
    color: #465c71;
    text-decoration: none;
}

div.menu ul li a:active
{
    background-color: #465c71;
    color: #cfdbe6;
    text-decoration: none;
}


I have struggled with this very item for some time and wondered why the vanilla ASP.NET solution did not support what we needed. After some experimenting, I came up with this fix which involves changing two files in the vanilla solution:

1) modify the Styles/Site.css file to add a definition and modify another. a) add this in the menu section:

div.menu ul li .selected
{
    background-color: #bfcbd6;
    color: #465c71;
    text-decoration: none;
}

b) Remove the visited directive by changing this line:

div.menu ul li a, div.menu ul li a:visited

to this one:

div.menu ul li a

2) This will show the 'selected' menu item in a highlighted color. However, the selected item is cleared somehow in the page callback sequence. To get around this issue, I made this modification to the Site.Master.cs file, basically to select the tab which contains the URL that we are looking at:

private void HighlightSelectedMenuItem()
{
    string MyURL = Request.Url.AbsoluteUri;
    foreach (MenuItem mi in NavigationMenu.Items)
    {
        string mytest = System.IO.Path.GetFileName(mi.NavigateUrl);
        if (MyURL.Contains(mytest))
        {
            mi.Selected = true;
        }
    }
}

Now just add this method to your Page_Load method and you are done.


Are you using a sitemap and sitemap datasource? To my knowledge you need those to get automatic insertion of the "selected" class in your list items.

After that you use the following css rule to style the selected menu item.

#mainmenu ul li a.selected {
  background-color: Yellow;
}
0

精彩评论

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