Utilisation de CSS et de styles avec le contrôle Menu

Article
10/22/2014

Mise à jour : novembre 2007

Presque chaque aspect de l'apparence du contrôle Menu peut être géré en utilisant les propriétés du contrôle Menu ou des feuilles de style en cascade (CSS). En sachant quelles propriétés contrôlent quels aspects du rendu, vous pouvez adapter l'apparence d'un menu. Cette rubrique présente les types de styles exposés par le contrôle Menu et suggère des meilleures pratiques pour définir des styles avec le contrôle Menu.

Vous pouvez définir des attributs des différents styles directement dans le balisage ou utiliser une feuille de style. La propriété CssClass peut être utilisée pour assigner une classe CSS à un style de menu qui contrôle un aspect de l'apparence du contrôle Menu. L'exemple suivant montre comment spécifier une propriété CssClass pour plusieurs propriétés Menu que vous pouvez ensuite référencer dans une feuille de style.

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

Notez qu'il est conseillé de spécifier des styles intralignes dans le balisage ou d'utiliser la propriété CssClass et de spécifier des styles à l'aide d'une feuille de style. Il n'est pas recommandé de spécifier des styles intralignes et d'utiliser une feuille de style en même temps, car un comportement inattendu pourrait se produire. Pour obtenir une présentation générale de l'utilisation de CSS avec les contrôles serveur, consultez Contrôles serveur Web ASP.NET et styles CSS.

Le contrôle Menu utilise deux modes d'affichage : statique et dynamique. L'affichage statique signifie qu'une partie ou que la totalité de la structure de menu est toujours visible. Un menu complètement statique affiche la totalité de la structure de menu et un utilisateur peut cliquer sur n'importe quelle partie. L'affichage dynamique signifie que des parties de la structure de menu apparaissent lorsque le pointeur de la souris est positionné sur certains éléments ; les éléments de menu enfants sont affichés uniquement lorsque l'utilisateur maintient le pointeur de la souris sur un nœud parent.

La propriété StaticDisplayLevels indique le nombre de niveaux d'éléments de menu qui sont affichés de façon statique. Si vous avez quatre niveaux d'éléments de menu et que la propriété StaticDisplayLevels a la valeur 3, les trois premiers niveaux sont affichés de façon statique et le dernier niveau d'éléments de menu est affiché de façon dynamique.

Pour contrôler l'apparence de la partie statique du menu, vous pouvez utiliser les propriétés de style avec le mot "Static" dans le nom :

Pour contrôler l'apparence de la partie dynamique du menu, vous pouvez utiliser les propriétés de style avec le mot "Dynamic" dans le nom :

Les propriétés StaticMenuStyle et DynamicMenuStyle affectent l'ensemble des éléments de menu statiques ou dynamiques, respectivement. Par exemple, si vous avez spécifié une bordure à l'aide de la propriété DynamicMenuStyle, l'intégralité de la région dynamique aura une bordure.

Contrastez ce comportement avec les propriétés StaticMenuItemStyle et DynamicMenuItemStyle. Ces propriétés affectent des éléments de menu individuels. Par exemple, si vous avez spécifié une bordure à l'aide de la propriété DynamicMenuItemStyle, chaque élément de menu dynamique aura sa propre bordure.

Les propriétés StaticSelectedStyle et DynamicSelectedStyle affectent uniquement l'élément de menu sélectionné, et les propriétés StaticHoverStyle et DynamicHoverStyle affectent le style de l'élément de menu lorsque le pointeur de la souris est positionné sur cet élément.

Une autre approche concernant le contrôle de l'apparence des éléments de menu est d'appliquer un style distinct à chaque niveau dans la structure de menu. Le contrôle Menu comprend plusieurs propriétés qui agissent comme des collections des styles, ce qui signifie qu'elles peuvent contenir des informations de style pour chaque niveau d'une structure de menu.

Les propriétés de style que vous pouvez utiliser pour spécifier l'apparence pour chaque niveau ont le mot "Level" dans leur nom :

L'exemple suivant crée une collection de quatre styles qui s'appliquent aux quatre premiers niveaux d'éléments de menu et pourraient être référencés dans une feuille de style en utilisant la valeur CssClass.

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

Le premier style de la collection s'applique aux éléments de menu de premier niveau ; le deuxième style s'applique aux éléments de menu de deuxième niveau, etc. Notez qu'il n'existe aucun héritage entre les styles de niveau afin que les styles appliqués à un niveau n'affectent pas les niveaux suivants.

L'exemple suivant crée une collection de trois styles qui s'appliquent aux trois premiers niveaux d'éléments de menu et pourraient être référencés dans une feuille de style.

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

Les styles que vous utilisez pour mettre en forme un contrôle Menu dépendent de la quantité et de l'emplacement du contrôle souhaité sur l'apparence des éléments de menu. Par exemple, si vous souhaitez que chaque niveau d'éléments de menu ait un aspect cohérent, utilisez la propriété LevelMenuItemStyles pour appliquer un style à chaque niveau de menu. Si vous souhaitez que tous les éléments de menu statique soient identiques et que tous les éléments de menu dynamique soient identiques, vous pouvez utiliser la propriété StaticMenuItemStyle pour contrôler l'apparence de tous les éléments de menu statique et la propriété DynamicMenuItemStyle pour contrôler l'apparence de tous les éléments de menu dynamique.

L'exemple suivant indique le contenu du balisage et de la feuille de style nécessaire pour créer un menu spécifique. Cet exemple illustre certaines meilleures pratiques lors de l'utilisation du contrôle Menu, y compris :

La propriété Font du contrôle Menu est utilisée dans le balisage pour définir la police pour le menu global.

La largeur du contrôle est définie par la propriété Width du contrôle Menu.
La propriété LevelMenuItemStyles est utilisée pour spécifier le style pour chaque niveau d'éléments de menu.
La déclaration !important est utilisée dans la feuille de style pour substituer la police par défaut pour le menu.

L'exemple suivant fournit le code déclaratif pour le contrôle de 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>

L'exemple suivant est le code CSS pour le contrôle de 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;
}

Le contrôle Menu final apparaît dans l'illustration suivante.