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

Posted

技术标签:

【中文标题】如何使用 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.highlightedSomeMenuClass 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/ 这很酷,免费且简单;)

【讨论】:

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

以上是关于如何使用 CSS 设置 asp.net 菜单的样式的主要内容,如果未能解决你的问题,请参考以下文章

如何在我的 ASP.NET 菜单中使用 BreadCrumb 的 Bootstrap 样式?

asp.NET - 菜单上选定页面的静态选定样式问题

哪个 jQuery/css 菜单库用于使用 ASP.NET TreeView 或菜单控件

asp.net menu控件菜单项的间距如何调?

IE 的 CSS 样式菜单问题

如何将媒体属性添加到 ASP.NET MVC4 样式包