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

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

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

我似乎是第一个报道似乎是一个bug的人.

您似乎也认为这是一个新的.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 " 并且它有效.

Answer 2

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

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