Bienvenue au pays du web statique

• Accueil
• XHTML
  • Les bases
  • Formulaires et tableaux
  • Bibliothèque de balises courantes
• CSS
  • Où mettre le CSS?
  • Formatage du texte
  • Positionnement & pseudo-formats
  • Bibliothèque de propriétés courantes
• tutos
• Liens Utiles
• Contact

Bienvenue à tous sur ce tuto. Vous allez pouvoir apprendre pas à pas; comment créer un menu stylisé pour vos futurs sites web.

Le code XHTML.

Le choix des balises xhtml se réalise en fonction de la nature de notre contenu. Pour un menu, il n'existe pas de balise spécifique pour désigner un ensemble de liens. La plupart du temps on peut considérer un menu de navigation comme une liste de liens. Cela nous permet donc d'utiliser la balise <ul> correspondant aux listes non ordonnées. Dans notre exemple; nous allons choisir un menu à 4 items :

<ul id="menu1"> <li><a href="#" title="aller à la partie 1">Lien 1</a> <ul><li> <a href="#" title="aller à la sous partie 1"> Sous partie 1 </a></li> <li> <a href="#" title="aller à la sous partie 2">Sous partie 2</a></li></ul></li> <li><a href="#" title="aller à la partie 2">Lien 2</a></li> <li><a href="#" title="aller à la partie 3">Lien 3</a></li> <li><a href="#" title="aller à la partie 4">Lien 4</a></li> </ul>

Voici une capture d'écran du résultat :
Maintenant que la base est posée, il faut habiller un peu notre menu pour le rendre plus convivial. C'est à ce moment là qu'intervient le CSS.

Le CSS.

On va d'abord définir les bases visuelles du menu.
#menu1 { width: 200px; margin: 10px; } #menu1 li { list-style-type: none; /*suppression des puces*/ margin: 0; padding: 0; }

On descend dans les profondeurs des listes à puces...
#menu1 li ul li{ display:none; /* pour faire disparaître le sous menu quand on passe pas dessus*/ } #menu1 li:hover ul li { display:block; /*apparition du sous menu en hover*/ width:200px; }

Maintenant occupons nous des liens du menu :
#menu1 li a { height: 32px; height: 24px; text-decoration: none; }

Petit effet de rollhover. Ici j'utilise une seule image pour enlever le temps de chargement de l'image de base à l'image en hover. Même si le chargement est minime, la méthode des "portes coulissantes" est intéressant pour la quasi instantanéïté du chargement de l'image.
#menu1 li a:link, #menu li a:visited { color: #656556; display: block; background: url(./images/menu.gif) no-repeat ; padding: 8px 0 0 20px; }

#menu1 li a:hover { color: #474739; background: url(./images/menu.gif) 0 -32px no-repeat; padding: 8px 0 0 20px; }

Et voilà vous avez un menu css convenable et vous connaissez la technique des portes coulissantes.

Voir le résultat