Utilisation d'images avec le contrôle Menu
Mise à jour : novembre 2007
Vous pouvez utiliser des images pour indiquer des éléments de menu enfant supplémentaires disponibles lorsque le pointeur de la souris est positionné sur un élément de menu. Vous pouvez également utiliser des images pour séparer des éléments de menu statiques ou dynamiques, ou servir d'arrière-plan pour l'intégralité du menu ou un niveau d'éléments de menu.
Vous pouvez spécifier les images à utiliser et le mode d'affichage de ces images à l'aide de feuilles de style en cascade (CSS) et des propriétés du contrôle Menu.
Utilisation des images contextuelles par défaut
Vous pouvez utiliser l'une ou l'autre de deux propriétés, ou les deux, pour désigner les images qui indiquent des éléments de menu enfant non affichés lorsque le contrôle Menu est restitué pour la première fois. Pour utiliser l'image par défaut pour indiquer qu'un élément de menu statique a des éléments enfants, affectez à la propriété StaticEnableDefaultPopOutImage la valeur true ; pour utiliser l'image par défaut pour un élément de menu dynamique avec les éléments enfants, affectez à la propriété DynamicEnableDefaultPopOutImage la valeur true. L'affectation de la valeur false à l'une ou l'autre de ces propriétés, ou les deux, masque l'image de flèche noire par défaut sur chaque élément de menu avec des éléments enfants.
L'exemple suivant affecte la valeur true aux deux propriétés afin que tous les éléments de menu statiques ou dynamiques qui ont des éléments enfants affichent l'image de flèche noire par défaut.
<asp:Menu ID="Menu1"
StaticEnableDefaultPopOutImage="true"
DynamicEnableDefaultPopOutImage="true">
Spécification d'icônes d'indicateur personnalisées
Pour utiliser des images personnalisées que vous avez créées pour les icônes d'indicateur, vous assignez des valeurs aux propriétés StaticPopOutImageUrl et DynamicPopOutImageUrl. Chacune de ces propriétés spécifie un emplacement de fichier et un nom qui indiquent l'image à utiliser. La propriété StaticPopOutImageUrl gouverne l'image utilisée pour les éléments de menu statiques et la propriété DynamicPopOutImageUrl gouverne l'image utilisée pour les éléments de menu dynamiques.
L'exemple suivant affecte l'image Greenarrow.gif, située dans le répertoire Images, aux icônes d'indicateur statiques et dynamiques.
<asp:Menu ID="Menu1" Runat="server"
StaticPopOutImageUrl="~/images/greenarrow.gif"
DynamicPopOutImageUrl="~/images/greenarrow.gif">
Spécification des images de séparateur
Les éléments de menu au même niveau peuvent être séparés les uns des autres par des images de séparateur. Vous pouvez spécifier des images de séparateur qui apparaissent au-dessus et en dessous des éléments de menu à un niveau donné, ou pour tous les niveaux du menu statique ou dynamique. Quatre propriétés sont utilisées pour spécifier des images de séparateur, deux pour les séparateurs supérieur et inférieur des éléments de menu statiques et deux pour les séparateurs supérieur et inférieur des éléments de menu dynamiques :
L'exemple suivant spécifie que l'image Greenseparator.gif apparaît en dessous de chaque élément de menu statique.
<asp:Menu ID="Menu2" Runat="server"
StaticBottomSeparatorImageUrl="~/greenseparator.gif">
Spécification des images de défilement
Si vous spécifiez de nombreux éléments de menu, le développement de la fenêtre indépendante utilisée pour afficher des éléments de menu dynamiques peut ne pas être suffisant pour afficher tous les éléments de menu. Le contrôle Menu crée automatiquement des barres de défilement afin que les utilisateurs puissent faire défiler la liste d'éléments de menu, et vous pouvez utiliser les propriétés ScrollDownImageUrl et ScrollUpImageUrl pour assigner des flèches personnalisées ou d'autres images aux icônes supérieure et inférieure de la barre de défilement.
L'exemple suivant montre comment vous utilisez ces deux propriétés pour spécifier des images personnalisées pour les flèches de barre de défilement.
<asp:Menu ID="Menu1" Runat="server"
ScrollUpImageUrl="~/images/greenuparrow.gif"
ScrollDownImageUrl="~/images/greenuparrow.gif"
Spécification de la taille d'image dans CSS
Le mode d'utilisation des images peut avoir un impact significatif sur la façon dont elles s'affichent avec un contrôle Menu. Par exemple, lorsqu'une page s'affiche pour la première fois et que les images utilisées sur le contrôle Menu n'ont pas encore été mises en cache par un navigateur, il peut sembler que ces images scintillent ou "sautent" jusqu'à ce que le navigateur détermine la taille d'image. En spécifiant la taille des images utilisées dans le contrôle Menu dans une feuille de style en cascade (CSS), vous pouvez éviter ce problème.
Si vous utilisez une image avec un élément de menu, assignez d'abord un nom de classe à la propriété WebControl.CssClass de l'élément de menu à l'aide de l'image dans le balisage HTML. Ensuite, dans la feuille CSS, vous pouvez indiquer la taille de l'image. L'exemple suivant assigne le nom de classe "menuitem" aux propriétés StaticMenuItemStyle et DynamicMenuItemStyle.
<StaticMenuItemStyle CssClass="menuitem" />
<DynamicMenuItemStyle CssClass="menuitem" />
Dans un fichier CSS qui est référencé par la page qui contient le menu, vous référencez ensuite la classe CSS de l'élément de menu et définissez la taille d'image.
L'exemple suivant référence la classe CSS "menuitem" et spécifie qu'une image de 40 x 40 pixels est utilisée pour indiquer quand un élément de menu a des éléments enfants.
.menuitem {} /*Style code for each menu item goes here. */
.menuitem img
{
width: 40px;
height: 40px;
}
Voir aussi
Tâches
Procédure pas à pas : affichage d'un menu sur des pages Web
Procédure pas à pas : contrôle des menus ASP.NET par programme
Concepts
Contrôles serveur Web ASP.NET et styles CSS
Vue d'ensemble des contrôles de menu