ASP.NET MenuItem Individuelle Stile

Question

Ich hoffe, ein ASP.NET Menu Control für die Navigation durch meine Website verwenden. Ich habe jedoch eine Anforderung, dass jedes MenuItem unterschiedlich formatiert werden muss (verschiedene Farben, sowohl statische als auch onHover). Ohne das Erstellen einer benutzerdefinierten Klasse, die von MenuItem erben würde, ist das möglich?

Gedanken zu einer besseren Lösung?

Answer 1

Kurz vorran Render auf Menu, sind Ihre Möglichkeiten sehr begrenzt. Das meiste von dem, was Sie brauchen würden, ist privat und versiegelt und Sie werden nirgendwo hinkommen.

Meine Lösung wäre, Vorlagen zu verwenden. Sie können MenuItem.Value oder Depth und ItemIndex verwenden, um jedes Element zu identifizieren und die erforderlichen Attribute bereitzustellen.

In Seite:

<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 (nie silliness diesen Codes nichts, ist es nur um das Prinzip zu demonstrieren):

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

Wenn Sie das Menü programmatisch zu generieren, können Sie den Stil hinzufügen und Onmouseover/onMouseOut Attribute, wenn jedes MenuItem zu schaffen, zum Beispiel:

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

Alternativ versuchen, diese Attribute in der Markup hinzufügen, wird IntelliSense nicht sagen, Sie, dass sie arbeiten, aber sie tun in der Regel (ich habe es nicht speziell mit MenuItems getestet):

<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);"/> 

Sie könnten etwas Glück mit CSS Friendly Adapters haben.

Natürlich können Sie eine vererbte Klasse und Nacharbeiten der Rendering-Routinen erstellen ...

Answer 3

Wenn jemand andere Beulen in die gleiche Frage .. .

Eine schnelle und dreckige Methode, die für mich funktionierte, ist, HTML-Inhalt in das MenuItem zu erzwingen (mit passender Flucht). Sie können es dann stylen jede mögliche Weise, die Sie in Ihrem CSS wollen, oder auch jeden Menüpunkt setzen einen anderen Stil zu verwenden:

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

Die HTML endet im Innern des <a> Tag bis:

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

Answer 4

Versuchen Sie, wie dieser Stil setzen für jeden Menüpunkt:

-Code hinter:

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

CSS-Klasse:

.bold 
{ 
    font-weight: bold; 
}