ASP.NET MenuItem Individual Styles

asp.net menu styles menuitem
CodeMonkey1313 picture CodeMonkey1313 · Apr 1, 2009 · Viewed 37k times · Source

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

Poustic picture Poustic · Jan 30, 2013

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>

Related questions

How to get rid of ugly asp:Menu flickering?

I'm using the asp:Menu control on an ASP.NET 4.0 Webforms page with table-free rendering mode: <asp:Menu ID="MenuBase" runat="server" DataSourceID="SiteMapDataSourceMenu" Orientation="Horizontal" CssClass="contentmenu" RenderingMode="List" IncludeStyleBlock="false"> </asp:Menu> The menu …

Read More
ASP.NET horizontal menu with submenu appearing below, also horizontal

I've got a horizontal menu with UL/LI markup that I want to convert to an ASP:Menu in .net 3.5. I'd like choices in the submenu to be rendered in a horizontal menu below the main menu when the main …

Read More
asp.net menu skiplink

The ASP.NET menu creates a skiplink which has 0x19 size and it is invisible in explorer, but it is rendered in chrome! So my menu has an extra 19 pixels indent! How do I overcome this? Here is it's HTML: &…

Read More