Usando Imagens com o Controle de Menu
Você pode usar imagens para indicar itens de menu filho adicionais disponíveis quando o ponteiro do mouse estiver posicionado sobre um item de menu.Você também pode usar imagens para separar itens de menu estático ou dinâmico, ou para servir como um plano de fundo para o menu inteiro ou para um nível de itens de menu.
Você pode especificar as imagens a serem usadas e como essas imagens são exibidas usando folhas de estilos em cascata (CSS) e as propriedades do controle Menu.
Usando as Imagens Pop-Out Padrão
Você pode usar uma das duas propriedades, ou ambas, para designar as imagens que indicam itens de menu filho não mostrados quando o controle Menu é processado primeiro.Para usar a imagem padrão para indicar que um item de menu estático possui itens filhos, defina a propriedade StaticEnableDefaultPopOutImagetrue; para usar a imagem padrão para um item de menu dinâmico com itens filhos, defina a propriedade DynamicEnableDefaultPopOutImage como true.Definir o valor para false para uma ou ambas dessas propriedades oculta a imagem da seta preta padrão em cada item de menu com itens filhos.
O exemplo a seguir define dois valores para true de modo que quaisquer itens de menu estático ou dinâmico que possuem itens filhos irão exibir a imagem padrão da seta preta.
<asp:Menu ID="Menu1"
StaticEnableDefaultPopOutImage="true"
DynamicEnableDefaultPopOutImage="true">
Especificando Ícones Indicadores Personalizados
Para usar imagens personalizadas que você criou para ícones indicadores, você atribui valores para as propriedades StaticPopOutImageUrl e DynamicPopOutImageUrl.Cada uma dessas propriedades especifica a localização e nome de um arquivo que indica a imagem a ser usada.A propriedade StaticPopOutImageUrl governa a imagem usada para itens de menu estático e a propriedade DynamicPopOutImageUrl governa a imagem usada para itens de menu dinâmico.
O exemplo a seguir define os ícones indicadores estático e dinâmico para a imagem Greenarrow.gif, localizada na pasta Imagens.
<asp:Menu ID="Menu1" Runat="server"
StaticPopOutImageUrl="~/images/greenarrow.gif"
DynamicPopOutImageUrl="~/images/greenarrow.gif">
Especificando Imagens Separadoras
Itens de menu no mesmo nível podem ser separados por imagens separadoras uns dos outros.Você pode especificar imagens separadoras que aparecem acima e abaixo de itens de menu em um determinado nível, ou para todos os níveis de menu estático ou dinâmico.Quatro propriedades são usadas para especificar imagens separadoras, dois para os separadores superior e inferior de itens de menu estático e dois para os separadores superior e inferior de itens de menu dinâmico:
O exemplo a seguir especifica que a imagem Greenseparator.gif aparece abaixo de cada item de menu estático.
<asp:Menu ID="Menu2" Runat="server"
StaticBottomSeparatorImageUrl="~/greenseparator.gif">
Especificando Imagens de Rolagem
Se você especificar muitos itens de menu, a janela pop-up usada para exibir os itens de menu dinâmico pode não expandir o suficiente para mostrar todos os itens de menu.O controle Menu cria automaticamente barras de rolagem para que usuários posaam rolar a lista de itens de menu e você pode usar as propriedades ScrollDownImageUrl e ScrollUpImageUrl para atribuir setas personalizadas ou outras imagens acima e abaixo dos ícones na barra de rolagem.
O exemplo a seguir mostra como você usaria essas duas propriedades para especificar imagens personalizadas para as setas na barra de rolagem.
<asp:Menu ID="Menu1" Runat="server"
ScrollUpImageUrl="~/images/greenuparrow.gif"
ScrollDownImageUrl="~/images/greenuparrow.gif"
Especificando Tamanho da Imagem no CSS
Como você trabalhar com imagens pode impactar significativamente em como eles são exibidos com um controle Menu.Por exemplo, quando uma página é exibida primeiro e as imagens usadas no controle Menu ainda não foram cacheadas por um navegador, essas imagens podem aparecer piscando ou "saltando" até que o navegador determine o tamanho da imagem.Especificando o tamanho das imagens usadas no controle Menu em um folha de estilo em cascata (CSS), você pode evitar que isso ocorra.
Se você usar uma imagem com um item de menu, primeiro atribua um nome de classe para a propriedade WebControl.CssClass do item de menu usando a imagem na marcação HTML.Em seguida, no CSS, você pode indicar o tamanho da imagem.O exemplo a seguir atribui o nome da classe "MenuItem" para as propriedades StaticMenuItemStyle e DynamicMenuItemStyle.
<StaticMenuItemStyle CssClass="menuitem" />
<DynamicMenuItemStyle CssClass="menuitem" />
Em um arquivo CCS referenciado pela página que contém o menu, você então faz referência à classe CSS do item de menu e define o tamanho de imagem.
O exemplo a seguir faz referência à classe CSS "MenuItem" e especifica que uma imagem 40 pixel por 40 pixel é usada para indicar quando um item de menu possui itens filhos.
.menuitem {} /*Style code for each menu item goes here. */
.menuitem img
{
width: 40px;
height: 40px;
}
Consulte também
Tarefas
Explicação passo a passo: Exibindo um menu em páginas da Web
Demonstra Passo a passo: Controlando menus do ASP.NET por programação
Conceitos
Controle de Servidor Web do ASP.NET e Estilos CSS
Visão Geral do Controle de Menu