Personnalisation du widget Barre de menus

Personnalisation du widget Barre de menus
Page 1 of 3
Création visuelle de pages Spry / Utilisation du widget de barre de menu
Personnalisation du widget Barre de menus
Bien que l'inspecteur Propriétés permette d'apporter des modifications simples à un widget Barre de menus,
il ne prend pas en charge les tâches de définition de style personnalisées. Vous pouvez modifier les règles
CSS du widget Barre de menus de manière à créer une barre de menus adaptée à vos besoins. Vous
trouverez la liste des tâches de définition de style avancées à l'adresse
www.adobe.com/go/learn_dw_sprymenubar_custom_fr.
Toutes les règles CSS des sections suivantes font référence aux règles par défaut, qui figurent dans le
fichier SpryMenuBarHorizontal.css ou SpryMenuBarVertical.css (selon l'option sélectionnée). Dreamweaver
enregistre ces fichiers CSS dans le dossier SpryAssets de votre site dès que vous créez un widget Barre de
menus Spry. Ces fichiers contiennent également des informations commentées au sujet de divers styles qui
s'appliquent au widget.
Même s'il est facile de modifier directement les règles du widget Barre de menus dans le fichier CSS qui
l'accompagne, vous pouvez également utiliser le panneau Styles CSS pour modifier le code CSS de la barre
de menus. Le panneau Styles CSS peut vous aider à trouver les classes CSS attribuées à différentes parties
du widget, en particulier si vous employez le mode Actuel du panneau.
Modification du style du texte d'un élément de menu
Le code CSS joint à la balise <a> contient les informations de style du texte. La balise <a> comprend
également plusieurs valeurs de classe de style de texte pertinentes qui concernent différents états des
menus.
Pour modifier le style du texte d'un élément de menu, recherchez la règle CSS appropriée dans le
tableau suivant, puis modifiez sa valeur par défaut :
Style à modifier
Règle CSS pour une barre de menus
verticale ou horizontale
Propriétés
correspondantes et
valeurs par défaut
Texte par défaut
ul.MenuBarVertical a,
ul.MenuBarHorizontal a
color: #333; textdecoration: none;
Couleur du texte
lorsque le pointeur de
la souris se trouve au-
ul.MenuBarVertical a:hover,
ul.MenuBarHorizontal a:hover
color: #FFF;
Couleur du texte actif
ul.MenuBarVertical a:focus,
ul.MenuBarHorizontal a:focus
color: #FFF;
Couleur d'un élément
de la barre de menus
lorsque le pointeur de
la souris se trouve audessus de celui-ci
ul.MenuBarVertical a.MenuBarItemHover,
ul.MenuBarHorizontal
a.MenuBarItemHover
color: #FFF;
Couleur d'un élément
de sous-menu lorsque
le pointeur de la
ul.MenuBarVertical
a.MenuBarItemSubmenuHover,
ul.MenuBarHorizontal
color: #FFF;
dessus de celui-ci
file://C:\Program Files\Fichiers communs\Adobe\Help\fr_FR\Dreamweaver\9.0\WSE... 28/11/2008
Personnalisation du widget Barre de menus
souris se trouve audessus de celui-ci
Page 2 of 3
a.MenuBarItemSubmenuHover
Modification de la couleur d'arrière-plan d'un élément de menu
Le code CSS joint à la balise <a> contient les informations de couleur d'arrière-plan d'un élément de
menu. La balise <a> comprend également plusieurs valeurs de classe de couleur d'arrière-plan
pertinentes qui concernent différents états des menus.
Pour modifier la couleur d'arrière-plan d'un élément de menu, recherchez la règle CSS appropriée
dans le tableau suivant, puis modifiez sa valeur par défaut :
Couleur à modifier
Règle CSS pour une barre de menus
verticale ou horizontale
Propriétés
correspondantes et
valeurs par défaut
Arrière-plan par
défaut
ul.MenuBarVertical a,
ul.MenuBarHorizontal a
background-color:
#EEE;
Couleur d'arrière-plan
de l'élément lorsque le
pointeur de la souris
se trouve au-dessus
de celui-ci
ul.MenuBarVertical a:hover,
ul.MenuBarHorizontal a:hover
background-color:
#33C;
Couleur d'arrière-plan
quand l'élément est
actif
ul.MenuBarVertical a:focus,
ul.MenuBarHorizontal a:focus
background-color:
#33C;
Couleur d'un élément
ul.MenuBarVertical a.MenuBarItemHover,
background-color:
de la barre de menus
lorsque le pointeur de
la souris se trouve audessus de celui-ci
ul.MenuBarHorizontal
a.MenuBarItemHover
#33C;
Couleur d'un élément
ul.MenuBarVertical
background-color:
de sous-menu lorsque
le pointeur de la
a.MenuBarItemSubmenuHover,
ul.MenuBarHorizontal
#33C;
souris se trouve audessus de celui-ci
a.MenuBarItemSubmenuHover
Modification de la taille des éléments de menu
Vous pouvez modifier la taille des éléments de menu en modifiant les propriétés de largeur des balises
li et ul de ces éléments.
1.
Accédez à la règle
ul.MenuBarVertical li ou ul.MenuBarHorizontal li :
2.
Modifiez la propriété « width » afin de lui donner la largeur désirée (ou remplacez sa valeur par
3.
auto pour supprimer une largeur fixe, puis ajoutez la propriété et la valeur white-space:
nowrap; à la règle).
Accédez à la règle ul.MenuBarVertical ul ou ul.MenuBarHorizontal ul.
4.
Modifiez la propriété « width » afin de lui donner la largeur désirée (ou remplacez sa valeur par
auto pour supprimer une largeur fixe).
file://C:\Program Files\Fichiers communs\Adobe\Help\fr_FR\Dreamweaver\9.0\WSE... 28/11/2008
Personnalisation du widget Barre de menus
5.
Accédez à la règle
Page 3 of 3
ul.MenuBarVertical ul li ou ul.MenuBarHorizontal ul
li :
6.
Ajoutez les propriétés suivantes à la règle :
float: none; et background-color:
transparent;.
7.
Supprimez la propriété
width: 8.2em; et sa valeur.
Définition de la position des sous-menus
La position des sous-menus d'une barre de menus Spry est contrôlée par la propriété « margin » des
balises ul du sous-menu.
ul.MenuBarVertical ul ou ul.MenuBarHorizontal ul.
margin: -5% 0 0 95%; par les valeurs désirées.
1.
Accédez à la règle
2.
Remplacez les valeurs par défaut
Informations associées
Panneau Styles CSS en mode Actuel
Centre de ressources d'aide
Cette page sur le Web
file://C:\Program Files\Fichiers communs\Adobe\Help\fr_FR\Dreamweaver\9.0\WSE... 28/11/2008