ASP.NET MenuItem 单独样式

Question

我希望使用 ASP.NET 菜单控件在我的网站中进行导航。 但是，我有一个要求，每个 MenuItem 必须采用不同的样式（不同的颜色，静态的和悬停时的颜色）。 如果不创建从 MenuItem 继承的自定义类，这可能吗？

关于更好的解决方案的想法？

Answer 1

如果其他人遇到同样的问题...

对我有用的一种快速而肮脏的方法是强制将 HTML 内容放入 MenuItem Text （并进行适当的转义）。 然后，您可以在 CSS 中以任何您想要的方式设置其样式，甚至将每个菜单项设置为使用不同的样式：

<asp:MenuItem Text="<span class="menuitem_text">Text Here</span>" />

HTML 最终位于 标记内：

<li><a  ...><span class="menuitem_text">Text Here</span></a></li>

Answer 2

如果没有覆盖菜单上的 RenderContents，您的选择非常有限。 你需要的大部分东西都是私密且密封的，你哪儿也去不了。

我的解决方案是使用模板。 您可以使用 MenuItem.Value 或 Depth 和 ItemIndex 来标识每个项目并提供必要的属性。

在页面中：

<asp:Menu ID="menu" runat="server" DynamicHorizontalOffset="2" StaticSubMenuIndent="10px">
    <Items>
        <asp:MenuItem Text="Item 1" Value="value 1">
            <asp:MenuItem Text="Item 2" Value="value 2">
                <asp:MenuItem Text="Item 3" Value="value 3"></asp:MenuItem>
            </asp:MenuItem>
            <asp:MenuItem Text="Item 4" Value="value 4">
                <asp:MenuItem Text="Item 5" Value="value 5"></asp:MenuItem>
            </asp:MenuItem>
            <asp:MenuItem Text="Item 6" Value="value 6"></asp:MenuItem>
        </asp:MenuItem>
        <asp:MenuItem Text="Item 7" Value="value 7"></asp:MenuItem>
        <asp:MenuItem Text="Item 8" Value="value 8"></asp:MenuItem>
    </Items>
    <StaticItemTemplate>
        <asp:Panel runat="server" ForeColor='<%# GetItemColor(Container) %>'>
            <%# Eval("Text") %> - <%# Eval("Value") %>
        </asp:Panel>
    </StaticItemTemplate>
    <DynamicItemTemplate>
        <asp:Panel ID="Panel1" runat="server" ForeColor='<%# GetItemColor(Container) %>'>
            <%# Eval("Text") %> - <%# Eval("Value") %>
        </asp:Panel>
    </DynamicItemTemplate>
</asp:Menu>

在代码中（不要介意这段代码的愚蠢，它只是为了演示原理）：

public Color GetItemColor(MenuItemTemplateContainer container)
{
    MenuItem item = (MenuItem)container.DataItem;

    //identify based value
    if (item.Value == "value 2")
        return Color.Brown;

    //identify based on depth and index
    if (item.Depth == 0)
        switch (container.ItemIndex)
        {
            case 0: return Color.Red;
            case 1: return Color.Blue;
            case 2: return Color.DarkGreen;
            default:
                return Color.Black;
        }
    else
        switch (container.ItemIndex)
        {
            case 0: return Color.Purple;
            case 1: return Color.Aqua;
            case 2: return Color.DarkOrange;
            default:
                return Color.Black;
        }
}

Answer 3

尝试像这样为每个菜单项设置样式：

代码隐藏：

 mnuMail.Items[1].Text = "<span class=\"bold\">Inbox</span>";  

CSS 类：

.bold
{
   font-weight: bold;
}

Answer 4

如果以编程方式生成菜单，则可以在创建每个 MenuItem 时添加 style 和 onmouseover/onmouseout 属性，例如：

menuItem.Attributes["style"] = "color: red;";
menuItem.Attributes["onmouseover"] = "javascript:Highlight(this);";

或者，尝试在标记中添加这些属性，IntelliSense 不会告诉您它们有效，但它们通常会告诉您（我）还没有专门用 MenuItems 进行测试）：

<asp:menuitem navigateurl="Home.aspx" 
    text="Home"
    imageurl="Images\Home.gif"
    popoutimageurl="Images\Popout.jpg"   
    tooltip="Home"
    style="color: red;" onmouseover="Highlight(this);" onmouseout="Unhighlight(this);"/>

您可能会幸运地使用 CSS 友好适配器。

当然，您可以创建一个继承类并重新处理渲染例程......