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

Posted 2023-03-06

【中文标题】如何使用 CSS 设置 asp.net 菜单的样式

【英文标题】：How to style an asp.net menu with CSS

【发布时间】：2011-02-08 23:13:51

【问题描述】：

我正在设计一个 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 的预期行为？？？通过使用 selected 我假设 .NET 在幕后做了什么，这是不对的。

【问题讨论】：

它对我来说很好用（举个更简单的例子——例如，我的菜单没有数据绑定）。你能发布相关的 CSS 类，也许还有一些渲染的 HTML 吗？

感谢您的回复，刚刚回复。

在标记中查找一些设置悬停样式的 javascript。在带有表格的原始布局中，所选样式仅在您单击其中一个菜单选项并且菜单执行回发后应用。

不，没有帮助。无论如何，我的课程都没有设置。看起来像一个错误。

【参考方案1】：

我感觉到你的痛苦，我浪费了整个晚上/早上试图解决这个问题。 凭借纯粹的蛮力，我想出了一个解决方案。称其为解决方法 - 但它很简单。

将 CssClass 属性添加到菜单控件的声明中，如下所示：

<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 属性，因为它们根本不做jack。

现在创建“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 早在 2008 年就发布了关于 Asp.Net 2.0 的信息。我们是地球上仅有的 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。我在我的 SomeMenuClass 样式中添加了“！important”，并且效果很好。

【讨论】：

哇！我试过这个，你是对的。我认为没有人使用 ASP.Net 菜单，因为它太拥挤了。他们在每个版本中不断增强它，但他们似乎并不了解基本要求。你怎么能不想在菜单上显示所选项目？？？

我认为大多数人都放弃了，只是从头开始构建自己的菜单。我挂在那里，最终能够让它工作，但我不得不研究生成的 html 以弄清楚如何为它编写 CSS，然后反复调整它，直到它在过去 3 个版本的所有浏览器中呈现相同。多么痛苦，但我能够避免使用 javascript 构建自定义交互式菜单。需要注意的一件事是 ASP.net 菜单的默认渲染模式在 4.0 中更改。请参阅此处的“备注”部分：msdn.microsoft.com/en-us/library/…

@MikeTeeVee 这只是节省了我几个小时，谢谢。您知道如何在每个水平菜单链接之间添加分隔图像吗？

【参考方案2】：

好吧，到目前为止，显然没有多少人尝试过 .NET 4 菜单。这并不奇怪，因为几天前发布了最终版本。我似乎是第一个报告似乎是错误的人。如果我有时间，我会向 MS 报告，但鉴于 MS 不关注错误报告的记录，我不会急于这样做。

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

【讨论】：

我刚刚将我选择的类命名为“selected”，它对我来说没问题，感谢提示

您的解决方案对我来说似乎是最好的，因为我不需要为特定于实现的类（如“a.static”）重写样式。我确实丢失了一些我需要的样式，但我现在能够仅基于我在 CssClass 属性中为菜单和项目指定的类来设置样式。

【参考方案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;
 

【参考方案4】：

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

一旦我删除了 NavigateUrl，它就会将“选定”的 css 类应用到 a 标签，并且我可以通过以下方式应用背景样式：

div.menu ul li a.static.selected

    background-color: #bfcbd6 !important;
    color: #465c71 !important;
    text-decoration: none !important;

【参考方案5】：

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

.level2

padding: 2px 2px 2px 2px;

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

【参考方案6】：

我尝试了 MikeTeeVee 的解决方案，仍然不行，我的意思是选定的选项卡仍然没有改变并保持不同的颜色。这篇文章解决了我的问题： Set CSS class 'selected' in ASP.NET menu parents and their children? 需要把代码放在代码后面。

【讨论】：

这对我有用 - 我的情况与 OP 略有不同，因为我的菜单是静态定义的，而不是使用数据源。

【参考方案7】：

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

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

<style>
    .StaticHoverStyle
    
        background: #000000;
    

    .StaticSelectedStyle
    
        background: blue;
    
</style>

【讨论】：

感谢您的评论。我没有提到这是 .NET 4，所以默认呈现是一个列表，而不是一个表格。

然后我会检查哪些样式被应用到列表中。我没有在这里安装 VS2010，所以我真的不能给你任何直接的提示，但是如果它以与原始设置类似的方式工作，那么他们正在将某种样式直接应用于生成的标记或使用 javascript，你需要检查它们是什么以及它们的应用位置。

你是对的，我注意到了这一点，但请查看我的编辑，因为我认为这不是解决方案。

【参考方案8】：

我不知道为什么这里的所有答案都如此混乱。我找到了一个相当简单的。为 asp:menu 使用 css 类，例如 mainMenu，并且在呈现为 HTML 时，该类下的所有菜单项都将是“a 标签”。因此，您只需为 CSS 中的那些“a 标签”提供 :hover 属性。 示例见下：

<asp:Menu ID="mnuMain" Orientation="Horizontal" runat="server" Font-Bold="True" Width="100%" CssClass="mainMenu">
  <Items>
    <asp:MenuItem Text="Home"></asp:MenuItem>
    <asp:MenuItem Text="About Us"></asp:MenuItem>
  </Items>
</asp:Menu>

在 CSS 中，写：

.mainMenu  background:#900; 
.mainMenu a  color:#fff; 
.mainMenu a:hover  background:#c00; color:#ff9; 

我希望这会有所帮助。 :)

【参考方案9】：

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

但这确实有效。

【参考方案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>

【参考方案11】：

有很好的第三方工具，但我通常使用superfish http://www.conceptdevelopment.net/Fun/Superfish/ 这很酷，免费且简单；）

【讨论】：

感谢您的关注，但这对解决手头的问题确实没有帮助...