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?

网站代码中的代码：

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

这是Hover上的样子，我想要一个类似的效果

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

$ b

推荐答案

这似乎是.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;
}

您可能还需要在主页加载一些代码，应该是这样选择的项目：

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屋！