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

Date de publication : 08/01/2008

Cet article a pour but de vous montrer comment créer un menu vertical à partir d'une liste non numérotée de liens.

Version PDF (Miroir) Version hors-ligne (Miroir)

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

I. Introduction

Au cours de ce tutoriel, nous verrons comment créer, à partir d'une simple liste de liens, un menu vertical avec les propriétés CSS qui sont à notre disposition et compatibles sur tous les récents navigateurs (IE6, IE7, Firefox, Safari, Opéra).

Notre but, ici, sera d'obtenir un menu ayant la même apparence que celui-ci :

II. Création de la liste en (X)HTML

En (X)HTML, il existe plusieurs solutions pour créer une liste de liens, notamment :

Les listes non numérotées : ul - li ;
Les listes numérotées : ol - li ;
Les listes de définitions : dl - dt - dd ;
et éventuellement l'utilisation de balises div.

Mais dans notre cas, nous utiliserons une liste non numérotées car ce sont les plus courantes et elles correspondent à nos attentes.

Nous aurons donc le code (X)HTML suivant :

Code (X)HTML de la liste de liens


<ul>
  <li><a href="#accueil">Accueil</a></li>
  <li><a href="#r1">Rubrique 1</a></li>
  <li><a href="#r2">Rubrique 2</a></li>
  <li><a href="#r3">Rubrique 3</a></li>
  <li><a href="#r4">Rubrique 4</a></li>	
</ul>

Et le résultat obtenu

III. Création du menu avec CSS

À ce stade, nous avons qu'une simple liste comme vous avez pu le voir dans le chapitre Création du menu en (X)HTML.

Par conséquent pour obtenir le résultat voulu, nous devons utiliser des propriétés CSS afin de personnaliser notre liste et d'avoir notre menu.

III-A. La liste ul - li

Pour personnaliser notre liste, il va falloir lui attribuer un style. Il nous faut donc modifier notre code (X)HTML afin que ce soit pris en compte et dont l'effet soit uniquement appliqué à notre menu. Le nouveau code est donc :

Code (X)HTML


<ul id="menu">
  <li><a href="#accueil">Accueil</a></li>
  <li><a href="#r1">Rubrique 1</a></li>
  <li><a href="#r2">Rubrique 2</a></li>
  <li><a href="#r3">Rubrique 3</a></li>
  <li><a href="#r4">Rubrique 4</a></li>	
</ul>

Il nous reste plus qu'à retirer la marge extérieure et intérieure de notre élément ul et à personnaliser sa bordure.

Code CSS de l'élément ul


ul#menu 
{			   
  margin    :   0;              /* Marge extérieur nulle */
  padding   :   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 */ 
}

Pour finir, on définit le type des puces de notre liste.

Code CSS des éléments li


ul#menu li 
{						  
  list-style-type   :  none;            /* Aucunes puces associées */
  margin-bottom     :  1px;             /* Ajout d'une marge en bas du lien */
}

Ainsi, on obtient le résultat

Maintenant, il nous reste plus qu'à personnaliser les liens.

III-B. Les liens

Suite au précédent paragraphe, il nous faut donner de la couleur à nos liens dans le but d'avoir notre résultat final. Par conséquent, nous allons définir le style CSS qui s'y rapporte.

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 */
  color             :   #39C;              /* Couleur de la police */
  display           :   block;             /* Définition sous forme de block */
  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 bien le résultat voulu : Résultat final

L'ordre de définition des bordures est à respecter. Si l'on change cet ordre nous n'aurons pas le résultat tant attendu mais un menu avec qu'une simple bordure de 1px.

IV. Code complet

Pour obtenir ce résultat, on a donc utilisé le code qui suit

Code (X)HTML complet


<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"	  		  	
	"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">		
	<head>				
		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> 
		<title>Liens personnalisés</title>  
		<style type="text/css">
			@import 'style.css';
		</style>
	</head>
	<body> 
		<ul id="menu">
			<li><a href="#accueil">Accueil</a></li>
			<li><a href="#r1">Rubrique 1</a></li>
			<li><a href="#r2">Rubrique 2</a></li>
			<li><a href="#r3">Rubrique 3</a></li>
			<li><a href="#r4">Rubrique 4</a></li>	
		</ul>
	</body>
</html>

Code CSS complet


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 du lien */
}

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 */
  color             :   #39C;              /* Couleur de la police */
  display           :   block;             /* Définition sous forme de block */
  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 */
}

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

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

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

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

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

V-E. 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 */
}

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

V-A. Remerciements

Je tiens à remercier Yoshio, Auteur et RideKick pour leur relecture.

V-B. Liens

Tous les cours sur le CSS

Toutes les sources CSS

Version PDF (Miroir) Version hors-ligne (Miroir)

Les sources présentées sur cette page sont libres de droits, et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une oeuvre intellectuelle protégée par les droits d'auteurs. Copyright © 08/01/2008 Rodrigue Hunel. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à 3 ans de prison et jusqu'à 300 000 E de dommages et intérêts. Cette page est déposée à la SACD.