Información general sobre el control Menu

Actualización: noviembre 2007

El control Menu de ASP.NET permite desarrollar tanto estática como dinámicamente los menús presentados en las páginas Web ASP.NET.

Este tema contiene:

• Background

• Ejemplos de código

• Referencia de clase

Background

El control Menu tiene dos modos de presentación: estática y dinámica. Presentación estática significa que el control Menu permanece completamente desplegado todo el tiempo. Se ve la estructura completa y el usuario puede hacer clic en cualquier parte. En un menú presentado dinámicamente, sólo son estáticas las partes que especifique, mientras sus elementos de menú secundarios se presentan cuando el usuario sitúa el puntero del mouse sobre el nodo primario.

Puede configurar el contenido del control Menu directamente en el control o puede especificar el contenido enlazando el control a un origen de datos. Sin necesidad de escribir código alguno, puede controlar la apariencia, la orientación y el contenido de un control Menu de ASP.NET. Además de las propiedades visuales expuestas por el control, éste admite los temas y máscaras de los controles ASP.NET. Para obtener más información sobre las máscaras y los temas, vea Información general sobre temas y máscaras de ASP.NET.

Comportamiento de la presentación estática

El comportamiento de la presentación estática puede controlarse con la propiedad StaticDisplayLevels del control Menu. La propiedad StaticDisplayLevels indica el número de niveles que se presentarán estáticamente desde la raíz del menú. Por ejemplo, si StaticDisplayLevels se establece en 3, el menú se desplegará para mostrar estáticamente sus tres primeros niveles. El nivel de presentación estática mínimo es 1; el control producirá una excepción si el valor se establece en 0 o en un número negativo.

Comportamiento de la presentación dinámica

La propiedad MaximumDynamicDisplayLevels especifica el número de niveles de nodos del menú que aparecen dinámicamente y que se deben mostrar a continuación del nivel de presentación estática. Por ejemplo, si el menú tiene un nivel estático de 3 y un nivel dinámico de 2, los tres primeros niveles del menú se mostrarán estáticamente, mientras que los dos niveles siguientes serán dinámicos.

Si MaximumDynamicDisplayLevels se establece en 0, no se mostrará dinámicamente ningún nodo de menú. Si MaximumDynamicDisplayLevels se establece en un número negativo, se producirá una excepción.

Definir el contenido del menú

El contenido del control Menu puede definirse de dos maneras: agregando objetos MenuItem individuales (mediante declaración o mediante programación) y enlazando los datos del control a un origen de datos XML.

Agregar manualmente los datos del menú

Para agregar elementos de menú individuales al control debe especificarlos en la propiedad Items. La propiedad Items es una colección de objetos MenuItem. En el ejemplo siguiente se muestra el formato declarativo de un control Menu con tres elementos, cada uno de ellos con dos elementos secundarios:

<asp:Menu ID="Menu1"  StaticDisplayLevels="3">
  <Items>
    <asp:MenuItem Text="File" Value="File">
      <asp:MenuItem Text="New" Value="New"></asp:MenuItem>
      <asp:MenuItem Text="Open" Value="Open"></asp:MenuItem>
    </asp:MenuItem>
    <asp:MenuItem Text="Edit" Value="Edit">
      <asp:MenuItem Text="Copy" Value="Copy"></asp:MenuItem>
      <asp:MenuItem Text="Paste" Value="Paste"></asp:MenuItem>
    </asp:MenuItem>
    <asp:MenuItem Text="View" Value="View">
      <asp:MenuItem Text="Normal" Value="Normal"></asp:MenuItem>
      <asp:MenuItem Text="Preview" Value="Preview"></asp:MenuItem>
    </asp:MenuItem>
  </Items>
</asp:Menu>

Enlace de datos a un origen de datos XML

El enlace a un archivo XML permite controlar el contenido del menú mediante modificaciones al archivo en lugar de utilizar el diseñador. Esto permite actualizar el aspecto de exploración del sitio sin necesidad de volver a visitar el control Menu o editar el código. Si tiene un sitio cuyo contenido suele cambiar, puede utilizar un archivo XML para organizarlo y enlazar el archivo al control Menu para garantizar que los usuarios del sitio Web puedan tener acceso al contenido.

Apariencia y comportamiento

El comportamiento del control Menu se puede ajustar a través de sus propiedades. Además, puede controlar el comportamiento de la presentación dinámica, incluida la cantidad de tiempo que un nodo del menú permanece visible una vez que se muestra. Por ejemplo, para cambiar la orientación del control Menu de horizontal a vertical, puede establecer la propiedad Orientation del modo siguiente:

[Visual Basic]

Menu.Orientation = Orientation.Vertical

[C#]

Menu.Orientation = Orientation.Vertical;

Al establecer la propiedad en Orientation.Horizontal la orientación vuelve a cambiar a horizontal.

Puede establecer propiedades individuales del control Menu para especificar el tamaño, el color, la fuente y otras características de su apariencia. Además, puede aplicar máscaras y temas al control Menu.

Estilo

Cada nivel del menú admite propiedades de estilo. Si no se establece ninguna propiedad de estilo dinámico, se utilizarán las propiedades de estilo estático. Si se establecen propiedades de estilo dinámico y no se establece ninguna propiedad de estilo estático, se utilizará la representación predeterminada de las propiedades de estilo estático. La jerarquía de estilos del control Menu es la siguiente:

1. Control

2. SubMenuStyles

3. MenuItemStyles

4. SelectedItemStyles

5. HoverMenuItemStyles

Estos estilos se combinan entre los menús dinámicos y estáticos utilizando la lógica siguiente:

• Cada estilo individual se aplica a la acción o el tipo de elemento apropiados.

• Todos los estilos se combinan con el estilo que los precede en la jerarquía y son reemplazados por el último estilo.

  Nota:
  Los menús estáticos nunca se combinan y, si no se define un estilo estático, se aplica el estilo dinámico.

Control de tiempo de la apariencia dinámica

Uno de los aspectos de los menús dinámicos es la cantidad de tiempo que tarda en desaparecer la parte del menú que aparece dinámicamente. Este valor se configura en milisegundos ajustando la propiedad DisappearAfter del modo siguiente:

[Visual Basic]

Menu.DisappearAfter = 1000

[C#]

Menu.DisappearAfter = 1000;

El valor predeterminado es 500 milisegundos. Si el valor de DisappearAfter se establece en 0, las pausas que se efectúen fuera del control Menu harán que éste desaparezca de forma inmediata. Si se establece el valor -1, la duración de la pausa será infinita y la parte dinámica sólo desaparecerá cuando se haga clic fuera del control Menu.

Usar el control Menu con controles UpdatePanel

Los controles UpdatePanel se usan para actualizar regiones seleccionadas de una página en lugar de actualizar la página entera con una devolución de datos. El control Menu se puede usar dentro de un control UpdatePanel, siempre que los estilos se apliquen con una referencia a una clase de hoja de estilos en cascada (CSS). Por ejemplo, en lugar de establecer la propiedad DynamicHoverStyle mediante un atributo de propiedad-subpropiedad, establezca el estilo con el atributo propiedad-CssClass. De igual forma, si usa la plantilla DynamicHoverStyle para establecer un estilo, utilice el atributo CssClass de la plantilla.

Para obtener más información sobre el uso de los controles UpdatePanel, vea Información general sobre el control UpdatePanel y Información general sobre la representación parcial de páginas.

Ejemplos de código

Utilizar CSS y estilos con el control Menu

Utilizar imágenes con el control Menú

Tutorial: Mostrar un menú en páginas Web

Tutorial: Controlar los menús de ASP.NET mediante programación

Volver al principio

Referencia de clase

En la tabla siguiente se enumeran las clases que se relacionan con el control Menu.

Volver al principio

Vea también

Conceptos

Información general sobre la exploración del sitio de ASP.NET

Referencia

Menu

Otros recursos

Controles de exploración del Cuadro de herramientas