Estilos ASP.NET MenuItem individuais
Pergunta
Eu estou esperando para usar um menu ASP.NET Controle para a navegação através do meu site. No entanto, eu tenho uma exigência que cada MenuItem devem ser decorados de forma diferente (cores diferentes, tanto estática e onHover). Sem criar uma classe personalizada que herda de MenuItem, isso é possível?
Reflexões sobre uma solução melhor?
Solução
curta de substituir RenderContents no Menu, suas opções são muito limitadas. A maioria do que você precisaria é privado e fechado e você não vai ficar em qualquer lugar lá.
A minha solução seria a utilização de templates. Você poderia usar MenuItem.Value ou profundidade e e ItemIndex para identificar cada item e fornecer atributos necessários.
Na 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>
No Código (nunca mente bobagem deste código, é apenas para demonstrar o princípio):
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;
}
}
Outras dicas
Se alguém esbarra na mesma pergunta ...
Um método rápido e sujo que funcionou para mim é a conteúdos vigor HTML no Text
MenuItem (com escape apropriado). Você pode, então, estilo-lo da maneira que quiser no seu CSS, ou mesmo definir cada item de menu para usar um estilo diferente:
<asp:MenuItem Text="<span class="menuitem_text">Text Here</span>" />
O HTML acaba dentro da tag <a>
:
<li><a ...><span class="menuitem_text">Text Here</span></a></li>
Tente como este para estilo set para cada item de menu:
código por trás:
mnuMail.Items[1].Text = "<span class=\"bold\">Inbox</span>";
classe CSS:
.bold
{
font-weight: bold;
}
Se você gerar o menu de programação, você pode adicionar o estilo e onmouseover / onmouseout atributos ao criar cada MenuItem, por exemplo:.
menuItem.Attributes["style"] = "color: red;";
menuItem.Attributes["onmouseover"] = "javascript:Highlight(this);";
Como alternativa, tente adicionar esses atributos na marcação, IntelliSense não vai dizer-lhe que eles trabalham, mas eles costumam fazer (eu não testei especificamente com 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);"/>
Você pode ter alguma sorte com CSS Adaptadores amigáveis ??.
Claro que você pode criar uma classe e re-trabalho herdou as rotinas de renderização ...