Utilizar imágenes con el control Menú
Actualización: noviembre 2007
Se pueden utilizar imágenes para indicar los elementos de menú secundarios adicionales que están disponibles cuando se sitúa el puntero del mouse encima de un elemento de menú. También se pueden utilizar imágenes para separar elementos de menú estáticos o dinámicos, o como fondo de todo el menú o de un nivel de elementos de menú.
Se pueden especificar las imágenes que se van a utilizar y su apariencia mediante hojas de estilos en cascada (CSS) y las propiedades del control Menu.
Utilizar las imágenes emergentes predeterminadas
Se puede utilizar una de dos propiedades, o ambas, para designar las imágenes que indican los elementos de menú secundarios que no se muestran la primera vez que se representa el control Menu. Para utilizar la imagen predeterminada para indicar que un elemento de menú estático tiene elementos secundarios, establezca la propiedad StaticEnableDefaultPopOutImage en true; para utilizar la imagen predeterminada para un elemento de menú dinámico con elementos secundarios, establezca la propiedad DynamicEnableDefaultPopOutImage en true. Al establecer el valor en false para una de estas propiedades o para ambas, se oculta la imagen de la flecha negra predeterminada en cada elemento de menú con elementos secundarios.
En el ejemplo siguiente se establecen ambos valores en true para que los elementos de menú estáticos o dinámicos que tengan elementos secundarios muestren la imagen de la flecha negra predeterminada.
<asp:Menu ID="Menu1"
StaticEnableDefaultPopOutImage="true"
DynamicEnableDefaultPopOutImage="true">
Especificar iconos de indicador personalizados
Para utilizar imágenes personalizadas que haya creado para iconos de indicador, debe asignar valores a las propiedades StaticPopOutImageUrl y DynamicPopOutImageUrl. Cada una de estas propiedades especifica una ubicación y un nombre de archivo que indican la imagen que se va a utilizar. La propiedad StaticPopOutImageUrl controla la imagen que se utiliza para los elementos de menú estáticos y la propiedad DynamicPopOutImageUrl controla la imagen que se utiliza para los elementos de menú dinámicos.
En el ejemplo siguiente se establecen los iconos de indicador estáticos y dinámicos en la imagen Greenarrow.gif, que se encuentra en el directorio Images.
<asp:Menu ID="Menu1" Runat="server"
StaticPopOutImageUrl="~/images/greenarrow.gif"
DynamicPopOutImageUrl="~/images/greenarrow.gif">
Especificar imágenes de separador
Los elementos de menú que se encuentran en el mismo nivel se pueden separar mediante imágenes de separador. Se pueden especificar imágenes de separador que aparezcan encima y debajo de los elementos de menú de un nivel dado o para todos los niveles del menú estático o dinámico. Para especificar imágenes de separador se utilizan cuatro propiedades: dos para los separadores superiores e inferiores de los elementos de menú estáticos y dos para los separadores superiores e inferiores de los elementos de menú dinámicos:
En el ejemplo siguiente se especifica que la imagen Greenseparator.gif aparezca debajo de cada elemento de menú estático.
<asp:Menu ID="Menu2" Runat="server"
StaticBottomSeparatorImageUrl="~/greenseparator.gif">
Especificar imágenes de desplazamiento
Si se especifican muchos elementos de menú, es posible que la ventana emergente que se utiliza para mostrar los elementos de menú dinámicos no se expanda lo suficiente para mostrar todos los elementos de menú. El control Menu crea barras de desplazamiento automáticamente para que los usuarios puedan desplazarse por la lista de elementos de menú, y se pueden utilizar las propiedades ScrollDownImageUrl y ScrollUpImageUrl para asignar flechas personalizadas u otras imágenes a los iconos superior e inferior de la barra de desplazamiento.
En el ejemplo siguiente se muestra cómo se utilizarían estas dos propiedades para especificar imágenes personalizadas para las flechas de la barra de desplazamiento.
<asp:Menu ID="Menu1" Runat="server"
ScrollUpImageUrl="~/images/greenuparrow.gif"
ScrollDownImageUrl="~/images/greenuparrow.gif"
Especificar el tamaño de la imagen en CSS
El modo de trabajar con las imágenes puede influir significativamente en el modo en que se muestran con un control Menu. Por ejemplo, la primera vez que se muestra una página y mientras el explorador no almacena en memoria caché las imágenes utilizadas en el control Menu, las imágenes pueden parpadear o "saltar" hasta que el explorador determina el tamaño de la imagen. Esto se puede evitar si se especifica el tamaño de las imágenes utilizadas en el control Menu en una hoja de estilos en cascada (CSS).
Si utiliza una imagen con un elemento de menú, primero asigne un nombre de clase a la propiedad WebControl.CssClass del elemento de menú utilizando la imagen en el formato HTML. Después, en la hoja de estilos en cascada, puede indicar el tamaño de la imagen. En el ejemplo siguiente se asigna el nombre de clase "menuitem" a las propiedades StaticMenuItemStyle y DynamicMenuItemStyle.
<StaticMenuItemStyle CssClass="menuitem" />
<DynamicMenuItemStyle CssClass="menuitem" />
Después, en un archivo CSS al que haga referencia la página que contiene el menú, haría referencia a la clase CSS del elemento de menú y establecería el tamaño de la imagen.
En el ejemplo siguiente se hace referencia a la clase CSS "menuitem" y se especifica que se va a utilizar una imagen de 40 píxeles por 40 píxeles para indicar cuándo un elemento de menú tiene elementos secundarios.
.menuitem {} /*Style code for each menu item goes here. */
.menuitem img
{
width: 40px;
height: 40px;
}
Vea también
Tareas
Tutorial: Mostrar un menú en páginas Web
Tutorial: Controlar los menús de ASP.NET mediante programación
Conceptos
Controles de servidor Web ASP.NET y estilos de CSS
Información general sobre el control Menu