Usando CSS e Estilos com o Menu Controle

Artigo
10/15/2014

Quase todos os aspectos da aparência do controle Menu podem ser gerenciados usando as propriedades do controle Menu ou folhas de estilos em cascata (CSS).Compreendendo que propriedades controlam cada aspectos do processamento, você pode adaptar a aparência de um menu.Este tópico apresenta os tipos de estilos expostos pelo controle Menu e fornece alumas recomendações para definir estilos com o Menu controle.

Você pode definir os atributos dos diversos estilos diretamente na marcação ou com o uso um folha de estilos.A propriedade CssClass pode ser usada para atribuir uma classe CSS à um estilo de menu que controla algum aspecto da aparência do controle Menu.O exemplo a seguir mostra como especificar uma propriedade CssClass para várias propriedades Menu que você pode fazer referência em um folha de estilos.

<asp:menu id="NavigationMenu2"
  staticdisplaylevels="3"
  orientation="Vertical"
  target="_blank"  
  
  CssClass="menu2">
  
<levelsubmenustyles>
  <asp:submenustyle CssClass="level1" />
  <asp:submenustyle CssClass="level2"/> 
  <asp:SubMenuStyle CssClass="level3" />
  </levelsubmenustyles>  
...

Observe que é uma prática recomendada especificar estilos interno na marcação ou usar a propriedade CssClass e especificar estilos usando um folha de estilos.Não é recomendado que você especifique estilos internos e use uma folha de estilos, porque isso poderia resultar em um comportamento inesperado.Para uma discussão geral do uso folhas de estilo em cascata com controles de servidor, consulte Controle de Servidor Web do ASP.NET e Estilos CSS.

The Menu controle usa dois modos de exibição: estático e dinâmico.Exibição Estática significa que parte ou todo a estrutura de menus é sempre visível.Um menu completamente estático exibe a estrutura inteira do menu, e um usuário pode clicar em qualquer parte dele.Exibição Dinâmica significa que partes da estrutura de menu aparecem quando o ponteiro do mouse é posicionado sobre determinados itens; itens de menu filho são exibidos somente quando o usuário mantém o ponteiro do mouse em um nó pai.

A propriedade StaticDisplayLevels determina quantos níveis de itens de menu são exibidos de forma estática.Se você tiver quatro níveis de itens de menu e a propriedade StaticDisplayLevels é definida como 3, os primeiros três níveis são exibidos de forma estática e o último nível dinamicamente.

Para controlar a aparência da parte estática do menu, você pode usar as propriedades de estilo com a palavra "Static" no nome:

Para controlar a aparência da parte dinâmica do menu, você pode usar as propriedades de estilo com a palavra "Dynamic" no nome:

As propriedades StaticMenuStyle e DynamicMenuStyle afetam todo o conjunto de itens de menu estático ou dinâmico, respectivamente.Por exemplo, se você tiver especificado uma borda usando a propriedade DynamicMenuStyle, toda a região dinâmica terá uma borda.

Esse comportamento pode ser mudado com as propriedades StaticMenuItemStyle e DynamicMenuItemStyle.Essas propriedades afetam os itens de menu individualmente.Por exemplo, se você tiver especificado uma borda usando a propriedade DynamicMenuItemStyle, cada item de menu dinâmico terá sua própria borda.

As propriedades StaticSelectedStyle e DynamicSelectedStyle afetam somente o item de menu selecionado, e as propriedades StaticHoverStyle e DynamicHoverStyle afetam o estilo do item de menu quando o ponteiro do mouse é posicionado sobre ele.

Outra abordagem para controlar a aparência dos itens de menu é criar um estilo separado para cada nível da estrutura do menu.O controle Menu tem várias propriedades que atuam como coleções de estilos, o que significa que eles podem conter informações de estilo para cada nível de uma estrutura de menus.

As propriedades de estilo que você pode usar para especificar a aparência de cada nível tem a palavra "Level" em seus nomes:

O exemplo a seguir cria uma coleção de quatro estilos que se aplicam aos quatro primeiros níveis de itens do menu e podem ser referenciados em um folha de estilos usando o valor CssClass.

  <LevelMenuItemStyles>
    <asp:MenuItemStyle CssClass="Level1Style" />
    <asp:MenuItemStyle CssClass="Level2Style" />
    <asp:MenuItemStyle CssClass="Level3Style" />
    <asp:MenuItemStyle CssClass="Level4Style" />
  </LevelMenuItemStyles>

O primeiro estilo na coleção se aplica aos itens de menu de primeiro nível; o segundo estilo se aplica aos itens de menu de segundo nível e assim por diante.Observe que há não herança entre os estilos dos níveis para que os estilos aplicados a um nível não afetem os níveis subsequentes.

O exemplo a seguir cria uma coleção de três estilos que se aplicam aos três primeiros níveis de itens do menu e podem ser referenciados em um folha de estilos.

  <LevelSubMenuStyles>
    <asp:SubMenuStyle CssClass="submenulevel1" />
    <asp:SubMenuStyle CssClass="submenulevel2" />
    <asp:SubMenuStyle CssClass="submenulevel3" />
  </LevelSubMenuStyles>

Os estilos que você usa para formatar um controle Menu dependem de quanto e onde você deseja controlar a aparência dos itens do menu.Por exemplo, se você desejar que cada nível do menu tenha uma aparência consistente, use a propriedade LevelMenuItemStyles para definir um estilo para cada nível.Se desejar que todos os itens de menu estático sejam iguais e todos os itens de menu dinâmico sejam iguais, você pode usar a propriedade StaticMenuItemStyle para controlar a aparência de todos os itens de menu estático e a propriedade DynamicMenuItemStyle para controlar a aparência de todos os itens de menu dinâmico.

O exemplo a seguir mostra a marcação e o conteúdo da folha de estilos necessários para criar um menu específico.Este exemplo demonstra algumas práticas recomendadas ao usar o controle Menu, incluindo:

A propriedade Font do controle Menu é usada na marcação para definir a fonte para o menus em geral.

A largura do controle é definida pelas propriedades do controle Width Menu.
A propriedade LevelMenuItemStyles é usada para especificar o estilo de cada nível de item do menu.
A declaração !important é usada no folha de estilos para substituir a fonte padrão para o menu.

O exemplo a seguir fornece o código declarativo para o controle do menu.

<asp:menu id="NavigationMenu1" CssClass="menu1"
  staticdisplaylevels="3"
  staticsubmenuindent="0" 
  orientation="Vertical"
  target="_blank"
  Font-names="Arial, Gill Sans"
  Width="100px"
  >

  <LevelMenuItemStyles>
    <asp:MenuItemStyle CssClass="level1"/>
    <asp:MenuItemStyle CssClass="level2"/>
    <asp:MenuItemStyle CssClass="level3" />
  </LevelMenuItemStyles>
  
  <StaticHoverStyle CssClass="hoverstyle"/>
  
  <LevelSubMenuStyles>
    <asp:SubMenuStyle CssClass="sublevel1" />
  </LevelSubMenuStyles>
  
  <items>
    <asp:menuitem text="Home" tooltip="Home">
    <asp:menuitem text="Section 1" tooltip="Section 1">
      <asp:menuitem text="Item 1" tooltip="Item 1"/>
      <asp:menuitem text="Item 2" tooltip="Item 2"/>
      <asp:menuitem text="Item 3" tooltip="Item 3"/>
    </asp:menuitem>
    <asp:menuitem text="Section 2" tooltip="Section 2">
      <asp:menuitem text="Item 1" tooltip="Item 1"/>
      <asp:menuitem text="Item 2" tooltip="Item 2">
        <asp:MenuItem Text="Subitem 1"/>
        <asp:menuitem Text="Subitem 2" />
      </asp:menuitem>
      <asp:menuitem text="Item 3" tooltip="Item 3"/>
    </asp:menuitem>
  </asp:menuitem>
  </items>
</asp:menu>

O exemplo a seguir é o código CSS para o controle do menu.

.level1
{
    color: White;
    background-color: Black;
    font-variant: small-caps;
    font-size: large;
    font-weight: bold;
}

.level2
{
    color: Blue;
    font-family: Gill Sans MT !important;
    font-size: medium;
    background-color: Gray;
}

.level3
{
    color: black;
    background-color: Silver;
    font-family: Gill Sans MT !important;
    font-size: small;
}

.hoverstyle
{
    font-weight: bold;
}
       
.sublevel1
{
    background-color: Gray !important;
    color: White !important;
    font-variant: small-caps;
}

O controle final Menu é mostrado na ilustração a seguir.