如何使用 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.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/ 这很酷,免费且简单;)
【讨论】:
感谢您的关注,但这对解决手头的问题确实没有帮助...以上是关于如何使用 CSS 设置 asp.net 菜单的样式的主要内容,如果未能解决你的问题,请参考以下文章
如何在我的 ASP.NET 菜单中使用 BreadCrumb 的 Bootstrap 样式?