ASP.NET MenuItem Individual Styles

Question

I'm hoping to use an ASP.NET Menu Control for navigation through my site. However, I've got a requirement that each MenuItem must be styled differently (different colors, both static, and onHover). Without creating a custom class that would inherit from MenuItem, is this possible?

Thoughts on a better solution?

Solution 1

Short of overriding RenderContents on Menu, your options are very limited. Most of what you'd need is private and sealed and you won't get anywhere there.

My solution would be to use templates. You could use MenuItem.Value or Depth and and ItemIndex to identify each item and provide necessary attributes.

In Page:

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

In Code (never mind silliness of this code, it is just to demonstrate the principle):

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

Solution 2

If anyone else bumps into the same question...

A quick and dirty method that worked for me is to force HTML contents into the MenuItem Text (with appropriate escaping). You can then style it any way you want in your CSS, or even set each menu item to use a different style:

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

The HTML ends up inside the <a> tag:

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

Solution 3

Try like this to set style for each menu item:

Code behind:

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

CSS class:

.bold
{
   font-weight: bold;
}

Comments

[CodeMonkey1313]

Adding it to the markup doesn't work, it results in a parser error

[CodeMonkey1313]

And MenuItem doesn't have an Attributes member.

[Buggieboy]

And there is no mouseover property for menuitem.

[Buggieboy]

I don't see how this solves his "hover" color requirement. While the panel control does have a ForeColor property, as you've shown, it doesn't have anything like onmouseover. If you're just interested in the default menu item colors, you could do something like: <asp:MenuItem Text="<span style='color: #006b54;'>Item 4</span>" Value="Item 4"</asp:MenuItem>

[ken2k]

This definitely works, but I'm not sure if it's too much dirty or not?

[Erik Bergstedt]

Very dirty.. I like it. I don't think you can get too dirty with Web Forms to be honest, it's pretty messed up to begin with.