Cours gratuits » Cours informatique » Cours développement web » Cours CSS

Cours création de Menu en CSS

Problème à signaler:

Télécharger Cours création de Menu en CSS

★★★★★★★★★★3.5 étoiles sur 5 basé sur 1 votes.
Votez ce document: ☆☆☆☆☆★★★★★

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

par Rodrigue Hunel

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.

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

III - Création du menu avec CSS

À ce stade, nous avons qu'une simple liste comme vous avez pu le voir dans le chapitre .

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

<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

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 :

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"

"">

<head>

<title>Liens personnalisés</title>

@import '';

</style>

</head>

<body>

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

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 que le code du paragraphe 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 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 */ }

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

V-E - Code CSS complet

Code CSS complet avec définition des pseudo-classes

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 */

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

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 , et pour leur relecture.

V-B - Liens

375