asp.NET - 问题与静态的菜单中选择样式为选定的页面 [英] asp.NET - Problems with Static Selected Style for a Selected Page on the menu

问题描述

我使用asp.NET 4.0与C＃和最近创造了我的本地Web应用程序的定制设计。我想，当选择了一个页面，它有一个不同的背景颜色（通常是在纯HTML + CSS，我们只设置一个菜单项为活动）。我尝试使用，但它不工作，它保持的颜色与其他人一样。没有任何一个有这样的经验吗？

I am using asp.NET 4.0 with C# and have recently created a custom design for my local web application. I would like that when a page is selected, it has a different background colour (usually in plain html + css we just set a menu item as active). I tried using but it is not working, it stays the same colour as the others. Does any one has any experience with this?

code在网站站长：

Code in Site Master:

            <h2>Dashboard</h2>
            <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Vertical" >
                <StaticSelectedStyle CssClass="selectedMenu" /> 
                <Items>
                    <asp:MenuItem NavigateUrl="~/Default.aspx" Text="View Submissions"/>
                    <asp:MenuItem NavigateUrl="~/Imports.aspx" Text="Import"/>
                    <asp:MenuItem NavigateUrl="~/Submission.aspx" Text="Insert Submission"/>
                    <asp:MenuItem NavigateUrl="~/Reports.aspx" Text="Reports"/>
                    <asp:MenuItem NavigateUrl="~/CurrencyMaintenance.aspx" Text="Currency Maintenance" />
                    <asp:MenuItem NavigateUrl="~/Remittance.aspx" Text="Remittance" />
                </Items>
            </asp:Menu>

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: #FFF; /*680840*/
    border: 1px #4e667d solid;
    height: 20px;
    width: 175px;
    color: #000; /*FFF*/
    display: block;
    line-height: 1.35em;
    padding: 4px 20px;
    text-decoration: none;
    white-space: nowrap;
}

div.menu ul li a:hover
{
    background-color: #680840;
    color: #FFF;
    text-decoration: none;
}

.selectedMenu
{
    background-color: #680840 !important;
    color: #FFF !important;
    text-decoration: none !important;
}

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

这是它看起来像哈弗，我想就选择了一个类似的效果。

This is what it looks like on Hover, I would like a similar effect on selected.

推荐答案

这似乎是与.NET菜单中的错误。这里有对此一些信息。你也许想要做的就是删除staticSelectedStyle属性，只需将它添加到你的CSS：

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

您可能还需要一些code添加到您主人的页面加载，以确定哪些应该是这样选择的项目：

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

这篇关于asp.NET - 问题与静态的菜单中选择样式为选定的页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！