Utilizar CSS y estilos con el control Menu

Artículo
10/22/2014

Actualización: noviembre 2007

Prácticamente cada aspecto de la apariencia del control Menu se puede administrar mediante las propiedades del control Menu u hojas de estilos en cascada (CSS). Sabiendo qué propiedades controlan cada aspecto de la representación, se puede personalizar la apariencia de un menú. En este tema se ofrece una introducción a los tipos de estilos expuestos por el control Menu y se sugieren algunos procedimientos recomendados para establecer estilos con el control Menu.

Puede establecer atributos de los distintos estilos directamente en el marcado o puede utilizar una hoja de estilos. Puede utilizar la propiedad CssClass para asignar una clase CSS a un estilo de menú que controle algún aspecto de la apariencia del control Menu. En el ejemplo siguiente se muestra cómo especificar una propiedad CssClass para varias propiedades de Menu a las que después se puede hacer referencia en una hoja 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>  
...

Recuerde que se recomienda especificar los estilos en línea en el marcado o utilizar la propiedad CssClass y especificar los estilos mediante una hoja de estilos. No se recomienda especificar estilos en línea y utilizar una hoja de estilos al mismo tiempo, ya que no se puede prever el resultado. En el tema Controles de servidor Web ASP.NET y estilos de CSS se describe a grandes rasgos el uso de CSS con controles de servidor.

Estilos y comportamiento del menú

El control Menu utiliza dos modos de presentación: estática y dinámica. La presentación estática implica que una parte o la totalidad de la estructura del menú siempre está visible. Un menú totalmente estático muestra la estructura de menú completa y un usuario puede hacer clic en cualquier parte del mismo. La presentación dinámica implica que algunas partes de la estructura del menú aparecen cuando se coloca el puntero del mouse (ratón) encima ciertos elementos; los elementos de menú secundarios se muestran sólo cuando el usuario mantiene el puntero encima de un nodo primario.

La propiedad StaticDisplayLevels indica cuántos niveles de elementos de menú se muestran de manera estática. Si tiene cuatro niveles de elementos de menú y la propiedad StaticDisplayLevels se encuentra establecida en 3, se muestran los tres primeros niveles estáticamente y el último nivel de elementos de menú se muestra dinámicamente.

Para controlar la apariencia de la parte estática del menú, puede utilizar las propiedades de estilo cuyos nombres contienen la palabra "Static":

Para controlar la apariencia de la parte dinámica del menú, puede utilizar las propiedades de estilo cuyos nombres contienen la palabra "Dynamic":

Las propiedades StaticMenuStyle y DynamicMenuStyle afectan al conjunto completo de elementos de menú estáticos o dinámicos, respectivamente. Por ejemplo, si especificara un borde mediante la propiedad DynamicMenuStyle, toda la parte dinámica tendría un borde.

Compare este comportamiento con el de las propiedades StaticMenuItemStyle y DynamicMenuItemStyle. Estas propiedades afectan a elementos de menú individuales. Por ejemplo, si especificara un borde mediante la propiedad DynamicMenuItemStyle, cada elemento de menú dinámico tendría su propio borde.

Las propiedades StaticSelectedStyle y DynamicSelectedStyle afectan solamente al elemento de menú seleccionado, y las propiedades StaticHoverStyle y DynamicHoverStyle afectan al estilo del elemento de menú cuando el puntero del mouse (ratón) se coloca encima del mismo.

Niveles de menú

Otro método para controlar la apariencia de los elementos de menú es aplicar el estilo a cada nivel de la estructura de menú de manera independiente. El control Menu tiene varias propiedades que actúan como colecciones de estilos, lo que significa que pueden contener información de estilo para cada nivel de una estructura de menú.

Las propiedades de estilo que se pueden utilizar para especificar la apariencia de cada nivel incluyen en sus nombres la palabra "Level":

El ejemplo siguiente crea una colección de cuatro estilos que se aplican a los cuatro primeros niveles de elementos de menú, y se podría hacer referencia a los mismos en una hoja de estilos utilizando el valor CssClass.

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

El primer estilo de la colección se aplica a los elementos de menú de primer nivel; el segundo estilo se aplica a los elementos de menú de segundo nivel, y así sucesivamente. Observe que los estilos de nivel no se heredan, por lo que los estilos que se aplican a un nivel no afectan a los siguientes niveles.

El ejemplo siguiente crea una colección de tres estilos que se aplican a los tres primeros niveles de elementos de menú, y se podría hacer referencia a los mismos en una hoja de estilos.

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

Escenario común de aplicación de estilos de menú

Los estilos que se utilizan para dar formato a un control Menu dependen de cuánto y dónde se desea controlar la apariencia de los elementos de menú. Por ejemplo, si desea que cada nivel de elementos de menú tenga una apariencia uniforme, utilice la propiedad LevelMenuItemStyles para aplicar un estilo a cada nivel de menú. Si desea que todos los elementos de menú estáticos tengan la misma apariencia y que todos los elementos de menú dinámicos tengan la misma apariencia, puede utilizar la propiedad StaticMenuItemStyle para controlar la apariencia de todos los elementos de menú estáticos y la propiedad DynamicMenuItemStyle para controlar la apariencia de todos los elementos de menú dinámicos.

El ejemplo siguiente muestra el marcado y el contenido de la hoja de estilos que son necesarios para crear un menú concreto. Este ejemplo muestra algunos procedimientos recomendados para utilizar el control Menu, entre los que se incluyen:

La propiedad Font del control Menu se utiliza en el marcado para establecer la fuente de todo el menú.

La propiedad Width del control Menu establece el ancho del control.
La propiedad LevelMenuItemStyles se utiliza para especificar el estilo de cada nivel de elementos de menú.
La declaración !important se utiliza en la hoja de estilos para reemplazar la fuente predeterminada del menú.

El ejemplo siguiente proporciona el código declarativo para el control del menú.

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

El ejemplo siguiente es el código de CSS para el control del menú.

.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;
}

El control Menu final se muestra en la ilustración siguiente.