Lorsqu'on a plusieurs menus (dans une même page ou dans plusieurs parties d'un même canevas), il est possible de surcharger les classes générales en leur affectant des valeurs d'attributs différentes pour chaque menu.
Suivant la balise à laquelle la classe est affectée, il faut procéder comme suit :
Pour chaque classe dont on connaît la valeur de l'attribut ID de la balise, il faut utiliser la classe nommée correspondante à la valeur de l'ID.
| Classe | ID de la balise | Classe nommée |
|---|---|---|
| AWSMenuDiv | divMnu<NOM_OBJET_MENU> | #divMnu<NOM_OBJET_MENU> |
| AWSMenuTbl | tblMnu<NOM_OBJET_MENU> | #tblMnu<NOM_OBJET_MENU> |
| AWSMenuTblSm | tblSmMnu<NOM_OBJET_MENU><NOM_OBJET_ITEM> | #tblSmMnu<NOM_OBJET_MENU><NOM_OBJET_ITEM> |
| AWSMenuTblI | tblIMnu<NOM_OBJET_MENU><NOM_OBJET_ITEM> | #tblIMnu<NOM_OBJET_MENU><NOM_OBJET_ITEM> |
Si la classe nommée surcharge un attribut déjà défini dans la classe générale, il faut caractériser cet attribut avec !important.
Exemple :
.AWSMenuDiv { /* classe utilisée par tous les menus de la page */
width:300px;
}
#divMnuMNU_2 { /* classe utilisée seulement par le menu MNU_2 */
position:absolute;
left:10px;
right:10px;
width: 500px !important;
}
Pour une classe dont on ne connaît pas la valeur de l'attribut ID de la balise, ou si le nombre de classes nommées à créer est trop important (cas de la classe AWSMenuTblI affectée à chaque item de menu, par exemple), il faut définir une classe en utilisant la règle CSS ancêtre descendant.
Si la balise fait partie de la barre de menu ou d'un menu contextuel, il faut utiliser comme ancêtre le DIV du menu général.
Exemples :
#divMnuMNU_2 .AWSMenuTbl {
}
#divMnuMNU_2 .AWSMenuTblI {
}
Si la balise fait partie d'un sous-menu, il faut utiliser comme ancêtre le DIV du sous-menu.
Exemples :
#divSmMnuMNU_2ITE1 .AWSMenuTblSm {
}
#divSmMnuMNU_2ITE1 .AWSMenuTblI {
}
Articles connexes