如何风格CSS一个asp.net菜单 [英] How to style an asp.net menu with CSS

问题描述

我在造型一个asp.net菜单的过程中，我试图理解StaticSelectedStyle-的CssClass和StaticHoverStyle-的CssClass参数的含义。

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

 ＆LT; ASP：菜单ID =NavigationMenu的DataSourceID =NavigationSiteMapDataSource
        StaticMenuStyle-的CssClass =StaticMenuStyle
        StaticMenuItemStyle-的CssClass =StaticMenuItemStyle
        StaticSelectedStyle-的CssClass =StaticSelectedStyle
        StaticHoverStyle-的CssClass =StaticHoverStyle
        方向=横向
        MaximumDynamicDisplayLevels =0
        =服务器＆GT;
＆LT; / ASP：菜单＆gt;
 

它为StaticMenuStyle-的CssClass和StaticMenuStyle-的CssClass（的类被施加到相关的元素），但StaticSelectedStyle-的CssClass和StaticHoverStyle-的CssClass不应用，而不管一个元素的选择或悬停状态。

那我该怎么做才能使这项工作？

感谢。

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

 ＆LT; D​​IV ID =NavigationMenu＆GT;
 ＆LT; UL类=1级StaticMenuStyle＆GT;
  ＆LT;立GT;＆LT;一类=1级StaticMenuItemStyle选定的href =/ Link.aspx＆GT;链接＆LT; / A＆GT;＆LT; /李＆GT;
 ＆LT; / UL＆GT;
＆LT; / DIV＆GT;
 

因此​​，大家可以看到，StaticMenuStyle和StaticMenuItemStyle得到应用，但不StaticSelectedStyle-的CssClass或StaticHoverStyle-的CssClass。不知道为什么。我知道我可以使用选择，但不是预期的行为StaticSelectedStyle-的CssClass应用？通过使用选择我作假设为.NET做幕后什么，这是不正确的。

解决方案

好吧，所以显然不是一大堆谁试图在.NET 4的菜单今天的人。并不奇怪，因为最终版本前几天公布。我似乎是第一个对什么似乎是一个bug报告过。我将此事报告给MS，如果我找到时间，但由于不重视bug报告，我并不急于这样的MS的跟踪记录。

反正此时至少最坏的解决方案是复制和粘贴由控制产生的CSS样式（检查标题）到自己的样式表，并从那里进行修改。您完成此操作后，不要忘了你的菜单上设置IncludeStyleBlock =FALSE，以prevent自动生成的CSS，因为我们将使用复制的块从现在开始。从概念上讲，这是不是你的应用程序不应该依赖于自动生成的code正确的，但是这是我能想到的唯一选择。

I'm in the process of styling an asp.net menu and I'm trying to understand the meaning of the StaticSelectedStyle-CssClass and StaticHoverStyle-CssClass parameters.

My understanding is that the styles defined with these parameters are applied as CSS classes to the relevant elements, whenever needed. So I created my menu as follows:

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

It works for StaticMenuStyle-CssClass and StaticMenuStyle-CssClass (the classes are applied to the relevant elements), but StaticSelectedStyle-CssClass and StaticHoverStyle-CssClass are not applied, regardless of the selected or hover status of an element.

What am I supposed to do to make this work?

Thanks.

EDIT: Sorry I should have mentioned that this is .NET 4. Here is the generated HTML:

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

So as you can see, StaticMenuStyle and StaticMenuItemStyle are applied, but not StaticSelectedStyle-CssClass or StaticHoverStyle-CssClass. Not sure why. I know I can use selected but isn't the expected behavior that StaticSelectedStyle-CssClass be applied??? By using selected I make assumptions as to what .NET does behind the scenes and that's not right.

解决方案

Alright, so there are obviously not a whole lot of people who have tried the .NET 4 menu as of today. Not surprising as the final version was released a couple days ago. I seem to be the first one to ever report on what seems to be a bug. I will report this to MS if I find the time, but given MS track-record of not paying attention to bug reports I'm not rushing this.

Anyway, at this point the least worst solution is to copy and paste the CSS styles generated by the control (check the header) into your own stylesheet and modify it from there. After you're done doing this, don't forget to set IncludeStyleBlock="False" on your menu so as to prevent the automatic generation of the CSS, since we'll be using the copied block from now on. Conceptually this is not correct as your application shouldn't rely on automatically generated code, but that's the only option I can think of.

这篇关于如何风格CSS一个asp.net菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！