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?

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