Créer votre menu vertical avec une liste et du CSS

Cours créer votre menu vertical avec une liste et du CSS, tutoriel & guide de travaux pratiques en pdf.

Pour aller plus loin

Le menu obtenu précédemment est bien conforme à nos attentes, mais nous pouvons aller plus loin en le personnalisant un peu plus avec les pseudo-classes :
• link
• visited
• hover
• active
Je tiens à préciser que l’utilisation de toutes ces pseudo-classes n’est pas une obligation.
C’est à vous d’adapter votre code selon vos besoins.
L’ordre de définition de ces pseudo-classes doit être identique à celui énoncé plus haut. En effet, si vous les définissez n’importe comment, certains effets ne seront pas obtenus. Pour vous rappeler l’ordre de définition, il suffit de mémoriser les initiales LVHA (Link, Visited, Hover, Active).

Utilisation de la pseudo-classe link

Cette pseudo-classe permet d’attribuer un style particulier à un lien non visité.
Dans notre cas, nous modifierons notre CSS afin de remplacer le code général des liens par celui-ci.
Code CSS des liens
ul#menu li a
{
width : auto !important; /* Largeur interprétée par tous les navigateurs excepté
IE6 et inférieur */
width : 100%; /* largeur interprétée par IE6 et inférieur */
padding : 4px; /* Définition des marges intérieures */
text-decoration : none; /* Suppression du soulignement */
display : block; /* Définition sous forme de block */
}
ul#menu li a:link
{
color : #39C; /* Couleur de la police */
background-color : #F5FBFF; /* Définition de la couleur de fond */
border : 1px solid #3399CC; /* Ajout d’une bordure */
border-left-width : 4px; /* Modification de la bordure gauche */
}
Nous obtenons le même résultat que le code du paragraphe Les liens sauf qu’une fois que l’on aura cliqué sur l’un d’entres eux nous aurons une couleur non défini dans notre code.
Pour éviter cet effet, il faut utiliser les autres pseudo-classes.

Utilisation de la pseudo-classe visited

Cette pseudo-classe permet d’attribuer un style particulier à un lien visité (qui a été cliqué un peu plus tôt).
On peut, par exemple, leur donner une couleur orange, de la manière suivante :
Code CSS des liens
ul#menu li a:visited
{
color : #FFA407; /* Changement de la couleur de la police initiale */
background-color : #FFF9AA; /* Changement de la couleur de fond initiale */
border : 1px solid #FFA407; /* Ajout d’une bordure */
border-left-width : 4px; /* Modification de la bordure gauche */
}
Une fois ce code rajouté, on peut voir que nos différents liens visités ont une couleur bien orange.

Utilisation de la pseudo-classe hover

Cette pseudo-classe permet d’attribuer un style particulier au survol d’un lien.
Ici, on leur donnera, par exemple, une couleur verte.
Code CSS des liens
ul#menu li a:hover
{
color : #993; /* Changement de la couleur de la police initiale */
background-color : #f4fbdc; /* Changement de la couleur de fond initiale */
border : 1px solid #993; /* Ajout d’une bordure */
border-left-width : 4px; /* Modification de la bordure gauche */
}
Voir le résultat

Utilisation de la pseudo-classe active

Cette pseudo-classe permet d’attribuer un style particulier à un lien lors du clic.
Ici, on leur donnera, par exemple, une couleur jaune.
Code CSS des liens
ul#menu li a:active
{
color : #FFC300; /* Changement de la couleur de la police initiale */
background-color : #FDFFA5; /* Changement de la couleur de fond initiale */
border : 1px solid #FFC300; /* Ajout d’une bordure */
border-left-width : 4px; /* Modification de la bordure gauche */
}
Voir le résultat

Code CSS complet

Code CSS complet avec définition des pseudo-classes
ul#menu
{
margin : 0; /* Marge extérieur nulle */
padding : 1px 1px 0; /* Marge intérieur à 1px sauf pour le bas */
width : 300px; /* Largeur de notre liste */
font-size : 1.2em; /* Taille de notre police */
border : 1px solid #39C; /* Application d’une bordure */
}
ul#menu li
{
list-style-type : none; /* Aucunes puces associées */
margin-bottom : 1px; /* Ajout d’une marge en bas */
}
ul#menu li a
{
width : auto !important; /* Largeur interprétée par tous les navigateurs excepté
IE6 et inférieur */
width : 100%; /* largeur interprétée par IE6 et inférieur */
padding : 4px; /* Définition des marges intérieures */
text-decoration : none; /* Suppression du soulignement */
display : block; /* Définition sous forme de block */
}
ul#menu li a:link
{
color : #39C; /* Couleur de la police */
background-color : #F5FBFF; /* Définition de la couleur de fond */
border : 1px solid #3399CC; /* Ajout d’une bordure */
border-left-width : 4px; /* Modification de la bordure gauche */
}
ul#menu li a:visited
{
color : #FFA407; /* Changement de la couleur de la police initiale */
background-color : #FFF9AA; /* Changement de la couleur de fond initiale */
border : 1px solid #FFA407; /* Ajout d’une bordure */
border-left-width : 4px; /* Modification de la bordure gauche */
}
ul#menu li a:hover
{
color : #993; /* Changement de la couleur de la police initiale */
background-color : #f4fbdc; /* Changement de la couleur de fond initiale */
border : 1px solid #993; /* Ajout d’une bordure */
border-left-width : 4px; /* Modification de la bordure gauche */
}
ul#menu li a:active
{
color : #FFC300; /* Changement de la couleur de la police initiale */
background-color : #FDFFA5; /* Changement de la couleur de fond initiale */
border : 1px solid #FFC300; /* Ajout d’une bordure */
border-left-width : 4px; /* Modification de la bordure gauche */
}

Conclusion

Cet article nous a montré que l’on peut très bien réaliser un menu vertical avec une liste de liens qu’avec du CSS.
Le JavaScript n’est pas indispensable pour apporter des effets de survol ou lors du clic.

– Introduction
II – Création de la liste en (X)HTML
III – Création du menu avec CSS
III-A – La liste ul – li
III-B – Les liens
IV – Code complet
V – Pour aller plus loin
IV-A – Utilisation de la pseudo-classe link
IV-B – Utilisation de la pseudo-classe visited
IV-C – Utilisation de la pseudo-classe hover
IV-D – Utilisation de la pseudo-classe active
V-E – Code CSS complet
VI – Conclusion
V-A – Remerciements
V-B – Liens