如何使用CSS来设计asp.net菜单

前端之家收集整理的这篇文章主要介绍了如何使用CSS来设计asp.net菜单前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在设计一个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。不知道为什么。我知道我可以使用选择,但不是StaticSelectedStyle-CssClass应用的预期行为?通过使用选定的我做出的假设是什么.NET在幕后,这是不对的。

解决方法

我感到你的痛苦,我浪费了整个晚上/早上试图弄清楚这一点。
用纯粹的强力我找出了一个解决方案。称之为解决方法 – 但它很简单。

将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属性,因为它们根本不做杰克。

现在创建“SomeMenuClass”,无论你放在哪里。它应该看起来像这样:

.SomeMenuClass
{
    color:Green;
}

接下来添加以下两个CSS类:

对于“悬停”样式添加

.SomeMenuClass a.static.highlighted
{
    color:Red !important;
}

对于“已选”样式添加

.SomeMenuClass a.static.selected
{
    color:Blue !important;
}

在那里,就是这样你完成了。希望这样可以节省你们一些我经历的挫败感。 BTW:你提到:

I seem to be the first one to ever
report on what seems to be a 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。我把“!important”加入到我的SomeMenuClass样式中,它的工作。

猜你在找的CSS相关文章