I am using an ASP.NET 4.0 Menu control with RenderingMode=List and am struggling with creating the appropriate CSS. Each menu item is represented by an <li> tag that contains a nested <a> tag with what appear to be fixed class names:
- <a class="level1"> for unselected level 1 menu items
- <a class="level2"> for unselected level 2 menu items
- <a class="level1 selected"> for the selected level 1 menu item
... etc...
What I want to do is to is to prevent the currently selected menu item from being "clickable". To do so I tried using:
if (menuItem.Selected) menuItem.Selectable = false;
This has the desired effect of removing the href attribute from the <a> tag but also removes the class attribute - and as a result my CSS can not identify what level the menu item belongs to!
Looks to me like a possible bug, but in any case I can't find any documentation describing what CSS class names are used, nor whether there is any way to control this (the old Style properties don't appear to have any effect). Ideally I would like to have "level" class attributes on the <li> tags, not just the nested <a> tags.
UPDATE
I've taken a look at the System.Web source with Reflector, and it appears that it does explicitly skip outputting CSS attributes if Selectable=false. The following is extracted from MenuRendererStandards.RenderItemLinkAttributes:
...
if (!item.Selectable)
{
return needsAccessKey; // !! exits without setting class attribute
}
if (item.Selected)
{
cssClass = cssClass + " selected";
}
writer.AddAttribute(HtmlTextWriterAttribute.Class, cssClass);
...