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

How to style an asp.net menu with CSS

提问by md1337

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.

我正在为 asp.net 菜单设计样式，我正在尝试理解 StaticSelectedStyle-CssClass 和 StaticHoverStyle-CssClass 参数的含义。

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:

我的理解是，使用这些参数定义的样式会在需要时作为 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>

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.

它适用于 StaticMenuStyle-CssClass 和 StaticMenuStyle-CssClass（这些类应用于相关元素），但不应用 StaticSelectedStyle-CssClass 和 StaticHoverStyle-CssClass，无论元素处于选中状态还是悬停状态。

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:

编辑：抱歉，我应该提到这是 .NET 4。这是生成的 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.

如您所见，应用了 StaticMenuStyle 和 StaticMenuItemStyle，但未应用 StaticSelectedStyle-CssClass 或 StaticHoverStyle-CssClass。不知道为什么。我知道我可以使用 selected 但不是应用 StaticSelectedStyle-CssClass 的预期行为吗？？？通过使用 selected ，我对 .NET 在幕后做了什么做出了假设，这是不对的。

采纳答案by md1337

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.

好吧，很明显，到今天为止，尝试过 .NET 4 菜单的人并不多。几天前发布了最终版本，这并不奇怪。我似乎是第一个报告似乎是错误的人。如果我找到时间，我会将此报告给 MS，但鉴于 MS 不注意错误报告的记录，我并不急于这样做。

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 样式（检查标题）复制并粘贴到您自己的样式表中，然后从那里进行修改。完成此操作后，不要忘记在菜单上设置 IncludeStyleBlock="False" 以防止自动生成 CSS，因为从现在开始我们将使用复制的块。从概念上讲，这是不正确的，因为您的应用程序不应依赖自动生成的代码，但这是我能想到的唯一选择。

回答by MikeTeeVee

I feel your pain and I wasted all night/morning trying to figure this out. With sheer brute force I figured out a solution. Call it a workaround - but it's simple.

我感觉到你的痛苦，我浪费了整夜/早上试图弄清楚这一点。凭借纯粹的蛮力，我想出了一个解决方案。称之为解决方法 - 但这很简单。

Add the CssClass property to your Menu Control's declaration like so:

将 CssClass 属性添加到菜单控件的声明中，如下所示：

<asp:Menu ID="NavigationMenu" DataSourceID="NavigationSiteMapDataSource"
        CssClass="SomeMenuClass"
        StaticMenuStyle-CssClass="StaticMenuStyle"
        StaticMenuItemStyle-CssClass="StaticMenuItemStyle"
        Orientation="Horizontal" 
        MaximumDynamicDisplayLevels="0" 
        runat="server">
</asp:Menu>

Just rip out the StaticSelectedStyle-CssClass and StaticHoverStyle-CssClass attributes as they simply don't do Hyman.

只需撕掉 StaticSelectedStyle-CssClass 和 StaticHoverStyle-CssClass 属性，因为它们根本不做 Hyman。

Now create the "SomeMenuClass", doesn't matter what you put in it. It should look something like this:

现在创建“SomeMenuClass”，不管你在里面放什么。它应该是这样的：

.SomeMenuClass
{
    color:Green;
}

Next add the following two CSS Classes:

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

For "Hover" Styling add:

对于“悬停”样式添加：

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

For "Selected" Styling add:

对于“选定”样式添加：

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

There, that's it. You're done. Hope this saves some of you the frustration I went through. BTW: You mentioned:

那里，就是这样。你完成了。希望这能让你们中的一些人免于我所经历的挫折。顺便说一句：你提到：

I seem to be the first one to ever report on what seems to be a bug.

我似乎是第一个报告似乎是错误的人。

You also seemed to think it was a new .NET 4.0 bug. I found this: http://www.velocityreviews.com/forums/t649530-problem-with-staticselectedstyle-and-statichoverstyle.htmlposted back in 2008 regarding Asp.Net 2.0 . How are we the only 3 people on the planet complaining about this?

您似乎还认为这是一个新的 .NET 4.0 错误。我发现了这个：http: //www.velocityreviews.com/forums/t649530-problem-with-staticselectedstyle-and-statichoverstyle.html于 2008 年发布的关于 Asp.Net 2.0 。地球上只有我们三个人在抱怨这个怎么办？

How I found the workaround (study the HTML output):

我如何找到解决方法（研究 HTML 输出）：

Here is the HTML output when I set StaticHoverStyle-BackColor="Red":

这是我设置 StaticHoverStyle-BackColor="Red" 时的 HTML 输出：

#NavigationMenu a.static.highlighted
{
    background-color:Red;
}

This is the HTML output when setting StaticSelectedStyle-BackColor="Blue":

这是设置 StaticSelectedStyle-BackColor="Blue" 时的 HTML 输出：

#NavigationMenu a.static.selected
{
    background-color:Blue;
    text-decoration:none;
}

Therefore, the logical way to override this markup was to create classes for SomeMenuClass a.static.highlightedand SomeMenuClass a.static.selected

因此，覆盖此标记的合乎逻辑的方法是为SomeMenuClass a.static.highlighted和 SomeMenuClass a.static.selected创建类

Special Notes:

特别说明：

You MUST also use "!important" on ALL the settings in these classes because the HTML output uses "#NavigationMenu", and that means any styles Asp.Net decides to throw in there for you will have inheritance priority over any other styles for the Menu Control with the ID "NavigationMenu". One thing I struggled with was padding, till I figured out Asp.Net was using "#NavigationMenu" to set the left and right padding to 15em. I tacked on "!important" to my SomeMenuClassstyles and it worked.

您还必须在这些类中的所有设置上使用“ !important”，因为 HTML 输出使用“ #NavigationMenu”，这意味着 Asp.Net 决定为您提供的任何样式都将具有优先于任何其他样式的继承优先级ID 为“ NavigationMenu”的菜单控件。我挣扎的一件事是填充，直到我发现 Asp.Net 正在使用“ #NavigationMenu”将左右填充设置为 15em。我在我的SomeMenuClass样式中添加了“ !important”并且它起作用了。

回答by user1664143

I remember the StaticSelectedStyle-CssClass attribute used to work in ASP.NET 2.0. And in .NET 4.0 if you change the Menu control's RenderingMode attribute "Table" (thus making it render the menu as s and sub-s like it did back '05) it will at least write your specified StaticSelectedStyle-CssClass into the proper html element.

我记得在 ASP.NET 2.0 中使用的 StaticSelectedStyle-CssClass 属性。在 .NET 4.0 中，如果您更改 Menu 控件的 RenderingMode 属性“Table”（从而使其将菜单呈现为 s 和 sub-s，就像它在 05 年所做的那样），它至少会将您指定的 StaticSelectedStyle-CssClass 写入正确的 html元素。

That may be enough for you page to work like you want. However my work-around for the selected menu item in ASP 4.0 (when leaving RenderingMode to its default), is to mimic the control's generated "selected" CSS class but give mine the "!important" CSS declaration so my styles take precedence where needed.

这可能足以让您的页面像您想要的那样工作。然而，我对 ASP 4.0 中选定菜单项的解决方法（当将 RenderingMode 保留为默认值时）是模仿控件生成的“选定”CSS 类，但给我的“！重要”CSS 声明，以便我的样式在需要时优先.

For instance by default the Menu control renders an "li" element and child "a" for each menu item and the selected menu item's "a" element will contain class="selected" (among other control generated CSS class names including "static" if its a static menu item), therefore I add my own selector to the page (or in a separate stylesheet file) for "static" and "selected" "a" tags like so:

例如，默认情况下，Menu 控件为每个菜单项呈现一个“li”元素和子“a”元素，所选菜单项的“a”元素将包含 class="selected"（在其他控件生成的 CSS 类名称中，包括“static”如果它是静态菜单项），因此我将自己的选择器添加到页面（或在单独的样式表文件中），用于“静态”和“选定”“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;
} 

回答by ryanjones

I ran into the issue where the class of 'selected' wasn't being added to my menu item. Turns out that you can't have a NavigateUrl on it for whatever reason.

我遇到了“selected”类没有被添加到我的菜单项的问题。事实证明，无论出于何种原因，您都无法在其上添加 NavigateUrl。

Once I removed the NavigateUrl it applied the 'selected' css class to the a tag and I was able to apply the background style with:

删除 NavigateUrl 后，它将“选定”css 类应用于 a 标记，并且我能够应用以下背景样式：

div.menu ul li a.static.selected
{
    background-color: #bfcbd6 !important;
    color: #465c71 !important;
    text-decoration: none !important;
}

回答by jeremy

Just want to throw something in to help people still having this problem. (for me at least) the css is showing that it puts default classes of level1, level2, and level3 on each piece of the menu(level 1 being the menu, level2 being the first dropdown, level3 being the third popout). Setting the padding in css

只是想投入一些东西来帮助仍然有这个问题的人。（至少对我而言）css 显示它在菜单的每个部分上放置了 level1、level2 和 level3 的默认类（level 1 是菜单，level2 是第一个下拉菜单，level3 是第三个弹出窗口）。在 css 中设置内边距

.level2
{
padding: 2px 2px 2px 2px;
}

does work for adding the padding to each li in the first dropdown.

确实可以将填充添加到第一个下拉列表中的每个 li。

回答by Charles

I tried MikeTeeVee's solution, still not work, I mean the selected tab still not change and keep different color. This post solved my problem: Set CSS class 'selected' in ASP.NET menu parents and their children?Need put code in code behind.

我尝试了 MikeTeeVee 的解决方案，仍然无效，我的意思是所选选项卡仍然没有改变并保持不同的颜色。这篇文章解决了我的问题： 在 ASP.NET 菜单父母和他们的孩子中设置 CSS 类“选择”？需要把代码放在后面的代码中。

回答by Sonam

I don't know why all the answers over here are so confusing. I found a quite simpler one. Use a css class for the asp:menu, say, mainMenu and all the menu items under this will be "a tags" when rendered into HTML. So you just have to provide :hover property to those "a tags" in your CSS. See below for the example:

我不知道为什么这里的所有答案都如此混乱。我找到了一个非常简单的。为 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>

And in the CSS, write:

在 CSS 中，写：

.mainMenu { background:#900; }
.mainMenu a { color:#fff; }
.mainMenu a:hover { background:#c00; color:#ff9; }

I hope this helps. :)

我希望这有帮助。:)

回答by Harv

The thing to look at is what HTML is being spit out by the control. In this case it puts out a table to create the menu. The hover style is set on the TD and once you select a menu item the control posts back and adds the selected style to the A tag of the link within the TD.

需要注意的是控件吐出的 HTML 是什么。在这种情况下，它会推出一个表格来创建菜单。悬停样式设置在 TD 上，一旦您选择菜单项，控件就会回发并将所选样式添加到 TD 内链接的 A 标记中。

So you have two different items that are being manipulated here. One is a TD element and another is an A element. So, you have to make your CSS work accordingly. If I add the below CSS to a page with the menu then I get the expected behavior of the background color changing in either case. You may be doing some different CSS manipulation that may or may not apply to those elements.

所以你有两个不同的项目在这里被操纵。一个是TD元素，另一个是A元素。所以，你必须让你的 CSS 相应地工作。如果我将下面的 CSS 添加到带有菜单的页面，那么在任何一种情况下，我都会得到背景颜色变化的预期行为。您可能正在执行一些不同的 CSS 操作，这些操作可能适用于也可能不适用于这些元素。

<style>
    .StaticHoverStyle
    {
        background: #000000;
    }

    .StaticSelectedStyle
    {
        background: blue;
    }
</style>

回答by ScottLenart

The best results I had with this broken control involved not using css at all, but rather using the built-in control properties for style (DynamicMenuItemStyle-BackColor, StaticHoverStyle-Width, etc.). This is terrible practice and bloats your code, as well as forcing you to do this for every instance of the control.

我对这个损坏的控件的最佳结果根本不使用 css，而是使用样式的内置控件属性（DynamicMenuItemStyle-BackColor、StaticHoverStyle-Width 等）。这是一种糟糕的做法，会使您的代码变得臃肿，并迫使您对控件的每个实例都执行此操作。

This does however work.

然而这确实有效。

回答by Prasanna

You can try styling with LevelSubMenuStyles

您可以尝试使用 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>