ASP.NET MenuItem Estilos individuales

Question

Espero utilizar un Control de menú ASP.NET para la navegación a través de mi sitio. Sin embargo, tengo el requisito de que cada elemento del menú tenga un estilo diferente (diferentes colores, tanto estáticos como onHover). Sin crear una clase personalizada que heredaría de MenuItem, ¿es esto posible?

¿Pensamientos sobre una mejor solución?

Answer 1

corto de anular RenderContents en el menú, las opciones son muy limitadas. La mayor parte de lo que necesitarías es privado y sellado, y no llegarás a ningún lado.

Mi solución sería utilizar plantillas. Puede usar MenuItem.Value o Depth y ItemIndex para identificar cada elemento y proporcionar los atributos necesarios.

En Página:

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

en el código (no importa estupidez de este código, que es sólo para demostrar el principio):

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 2

Si genera el menú de programación, puede añadir el estilo y onmouseover/onmouseout atribuye al crear cada MenuItem, por ejemplo:

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

Alternativamente, trate de añadir esos atributos en el marcado, IntelliSense no contar usted que trabajar, pero por lo general (no he probado específicamente con 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);"/> 

es posible que haya un poco de suerte con CSS Friendly Adapters.

Por supuesto, puede crear una clase heredada y volver a trabajar las rutinas de renderización ...

Answer 3

si alguien golpes demás en la misma pregunta ..

Un método rápido y sucio que funcionó para mí es forzar los contenidos HTML en el ItemItem Text (con escapes adecuados). A continuación, puede estilo de la forma que desee en su CSS, o incluso ajustar cada elemento de menú para utilizar un estilo diferente:

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

El HTML termina dentro de la <a> etiqueta:

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

Answer 4

Trate como esto para ajustar el estilo para cada elemento del menú:

Código atrás:

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

clase CSS:

.bold 
{ 
    font-weight: bold; 
}