Question

我正在设计一个asp.net菜单，我正在尝试理解StaticSelectedStyle-CssClass和StaticHoverStyle-CssClass参数的含义。

我的理解是，在需要时，使用这些参数定义的样式将作为CSS类应用于相关元素。所以我创建了如下菜单：

<asp:Menu ID="NavigationMenu" DataSourceID="NavigationSiteMapDataSource" 
        StaticMenuStyle-CssClass="StaticMenuStyle"
        StaticMenuItemStyle-CssClass="StaticMenuItemStyle"
        StaticSelectedStyle-CssClass="StaticSelectedStyle"
        StaticHoverStyle-CssClass="StaticHoverStyle"
        Orientation="Horizontal" 
        MaximumDynamicDisplayLevels="0" 
        runat="server">
</asp:Menu>

适用于StaticMenuStyle-CssClass和StaticMenuStyle-CssClass（类应用于相关元素），但不应用StaticSelectedStyle-CssClass和StaticHoverStyle-CssClass，无论元素的选定状态或悬停状态如何。

我应该做些什么来完成这项工作？

感谢。

编辑：对不起我应该提到这是.NET 4.这是生成的HTML：

<div id="NavigationMenu">
 <ul class="level1 StaticMenuStyle">
  <li><a class="level1 StaticMenuItemStyle selected" href="/Link.aspx">Link</a></li>
 </ul>
</div>

如您所见，应用StaticMenuStyle和StaticMenuItemStyle，但不应用StaticSelectedStyle-CssClass或StaticHoverStyle-CssClass。不知道为什么。我知道我可以使用selected但不是StaticSelectedStyle-CssClass应用的预期行为???通过使用选择我做出的假设是关于.NET在幕后做什么，这是不对的。

Answer 1

我感觉到你的痛苦，我整晚都在浪费，试图解决这个问题。凭借纯粹的蛮力，我找到了解决方案。称之为解决方法 - 但这很简单。

将CssClass属性添加到Menu Control的声明中，如下所示：

<asp:Menu ID="NavigationMenu" DataSourceID="NavigationSiteMapDataSource"
        CssClass="SomeMenuClass"
        StaticMenuStyle-CssClass="StaticMenuStyle"
        StaticMenuItemStyle-CssClass="StaticMenuItemStyle"
        Orientation="Horizontal" 
        MaximumDynamicDisplayLevels="0" 
        runat="server">
</asp:Menu>

只需删除StaticSelectedStyle-CssClass和StaticHoverStyle-CssClass属性，因为它们根本不执行插孔。

现在创建“SomeMenuClass”，无论你放入什么都没关系。看起来应该是这样的：

.SomeMenuClass
{
    color:Green;
}

接下来添加以下两个CSS类：

对于“悬停”样式添加：

.SomeMenuClass a.static.highlighted
{
    color:Red !important;
}

对于“已选定”样式添加：

.SomeMenuClass a.static.selected
{
    color:Blue !important;
}

那就是它。你完成了。希望这可以节省一些我经历过的挫败感。顺便说一句：你提到过：

我似乎是第一个有史以来的人报告什么似乎是一个错误。

您似乎也认为这是一个新的.NET 4.0错误。我找到了这个： http://www.velocityreviews.com/forums/t649530-problem-with-staticselectedstyle-and-statichoverstyle.html 关于Asp.Net 2.0，于2008年发布。我们这个星球上只有3个人抱怨这个吗？

我如何找到解决方法（研究HTML输出）：

当我设置StaticHoverStyle-BackColor =“Red”：

时，这是HTML输出

#NavigationMenu a.static.highlighted
{
    background-color:Red;
}

这是设置StaticSelectedStyle-BackColor =“Blue”时的HTML输出：

#NavigationMenu a.static.selected
{
    background-color:Blue;
    text-decoration:none;
}

因此，覆盖此标记的逻辑方法是为 SomeMenuClass创建类a.static.highlighted 和 SomeMenuClass a.static.selected

特别说明：

你必须在这些类中的所有设置上使用“！important ”，因为HTML输出使用“ #NavigationMenu ”，这意味着任何样式Asp.Net决定投入，因为菜单控件的任何其他样式都具有继承优先级，ID为“ NavigationMenu ”。我努力的一件事就是填充，直到我发现Asp.Net正在使用“ #NavigationMenu ”将左右填充设置为15em。我将“！important ”添加到我的 SomeMenuClass 样式中，并且它有效。

Answer 2

好的，所以很明显没有很多人在今天尝试过.NET 4菜单。因为最终版本在几天前发布，这并不奇怪。我似乎是第一个报道似乎是一个bug的人。如果我找到时间，我会向MS报告这个问题，但考虑到MS不跟踪错误报告的跟踪记录，我不是急于求成。

无论如何，在这一点上，最差的解决方案是将控件生成的CSS样式（检查标题）复制并粘贴到您自己的样式表中并从那里进行修改。完成此操作后，不要忘记在菜单上设置IncludeStyleBlock =“False”以防止自动生成CSS，因为从现在开始我们将使用复制的块。从概念上讲，这是不正确的，因为您的应用程序不应该依赖于自动生成的代码，但这是我能想到的唯一选择。

Answer 3

我记得曾经在ASP.NET 2.0中工作的StaticSelectedStyle-CssClass属性。在.NET 4.0中，如果你更改Menu控件的RenderingMode属性“Table”（因此它将菜单呈现为s和sub-s，就像它回到'05那样），它至少会将你指定的StaticSelectedStyle-CssClass写入正确的html元件。

这可能足以让您的网页按照您的意愿工作。然而，我在ASP 4.0中选择菜单项（将RenderingMode保留为默认值）的方法是模仿控件生成的“选定”CSS类，但是给我的“！important”CSS声明，所以我的样式优先于需要的地方。

例如，默认情况下，Menu控件为每个菜单项呈现“li”元素和子元素“a”，并且所选菜单项的“a”元素将包含class =“selected”（以及其他控件生成的CSS类名称，包括“静态”如果它是一个静态菜单项），因此我将自己的选择器添加到页面（或单独的样式表文件）中，用于“静态”和“选择”“a”标签，如下所示：

a.selected.static
{
background-color: #f5f5f5 !important;
border-top: Red 1px solid !important;
border-left: Red 1px solid !important;
border-right: Red 1px solid !important;
}

Answer 4

我遇到了“选定”类未添加到菜单项的问题。事实证明，无论出于何种原因，您都无法使用NavigateUrl。

一旦我删除了NavigateUrl，它就将'selected'css类应用于a标签，并且我能够应用背景样式：

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

Answer 5

只想投入一些东西来帮助人们解决这个问题。（对我来说至少）css显示它在菜单的每一部分上放置了level1，level2和level3的默认类（级别1是菜单，level2是第一个下拉，level3是第三个弹出）。在css中设置填充

.level2
{
padding: 2px 2px 2px 2px;
}

可以在第一个下拉列表中为每个li添加填充。

Answer 6

我尝试过MikeTeeVee的解决方案，仍然无法正常工作，我的意思是所选标签仍然没有改变并保持不同的颜色。这篇文章解决了我的问题： Set CSS class 'selected' in ASP.NET menu parents and their children? 需要在代码中加入代码。

Answer 7

要看的是控制器正在吐出的HTML。在这种情况下，它会发出一个表来创建菜单。悬停样式在TD上设置，一旦您选择菜单项，控件就会回发并将所选样式添加到TD内链接的A标记中。

所以你有两个不同的项目在这里被操纵。一个是TD元素，另一个是A元素。所以，你必须相应地使你的CSS工作。如果我将下面的CSS添加到带有菜单的页面，那么在任何一种情况下我都会得到背景颜色的预期行为。您可能正在进行一些可能适用于这些元素的CSS操作。

<style>
    .StaticHoverStyle
    {
        background: #000000;
    }

    .StaticSelectedStyle
    {
        background: blue;
    }
</style>

Answer 8

我不知道为什么这里的所有答案都如此令人困惑。我发现了一个非常简单的一个。使用css类作为asp：菜单，比如mainMenu，其下的所有菜单项都是＆＃34;标签＆＃34;当呈现为HTML时。所以你只需要提供：将hover属性提供给那些＆＃34;标签＆＃34;在你的CSS中。请参阅下面的示例：

XAML

在CSS中，写一下：

ViewModel

我希望这会有所帮助。：）

Answer 9

我对这个破坏的控件的最佳结果包括根本不使用css，而是使用样式的内置控件属性（DynamicMenuItemStyle-BackColor，StaticHoverStyle-Width等）。这是一种糟糕的做法，会使您的代码膨胀，并迫使您为控件的每个实例执行此操作。

但这确实有效。

Answer 10

您可以尝试使用LevelSubMenuStyles

进行样式设置

            <asp:Menu ID="mainMenu" runat="server" Orientation="Horizontal" 
                StaticEnableDefaultPopOutImage="False">
                <StaticMenuStyle CssClass="test" />
                <LevelSubMenuStyles>
                    <asp:SubMenuStyle BackColor="#33CCFF" BorderColor="#FF9999" 
                        Font-Underline="False" />
                    <asp:SubMenuStyle BackColor="#FF99FF" Font-Underline="False" />
                </LevelSubMenuStyles>
                <StaticMenuItemStyle CssClass="main-nav-item" />
            </asp:Menu>

Answer 11

有很好的第三方工具，但我通常使用superfish http://www.conceptdevelopment.net/Fun/Superfish/ 它很酷，免费且容易;）

如何使用CSS设置asp.net菜单的样式

11 个答案: