Bienvenue sur le site de Jef

Étude CSS

Création pas à pas d'un menu horizontal

Mise en forme simple
Mise en forme bouton 3D
Mise en forme SANS bouton 3D
- Avec des coins ronds et des ombres
- Avec juste des ombres

Les menus sont logiquement des listes à puces, et il est tout à fait possible de réaliser un menu horizontal avec les CSS.
Dans les exemples qui suivent nous définirons une classe hormenu à la liste ci-dessous:

<ul class="hormenu">
  <li><a href="/ex1.php" target="_blank">choix1</a></li>
  <li><a href="/ex2.php" target="_blank">choix2</a></li>
  <li><a href="/ex3.php" target="_blank">choix3</a></li>
  <li><a href="/ex4.php" target="_blank">choix4</a></li>
</ul>

Soit le résultat suivant:

Mise en forme simple

Définition horizontale

Le principe est donc de transformer cette liste à puces verticale en liste (sans puces) horizontale.
Pour commencer, on va donc déclarer une classe .hormenu à la liste <ul>.
Nous la définissons sans puces avec la déclaration list-style-type:none
et nous mettons les marges extérieures margin:0px; et intérieures padding:0px; à zéro.
Nous en profitons pour centrer tous les textes avec text-align:center;

Code CSS:

.hormenu    { list-style-type:none; padding:0; margin:0; text-align:center; }

Afin de placer chaque élément de la liste sur une ligne horizontale, nous allons déclarer la liste en float:left;

.hormenu    { list-style-type:none; padding:0; margin:0; text-align:center; }
.hormenu li { float:left; }

Vous pouvez voir le résultat ci-dessous:

Définition du lien <a>

Ensuite il faut définir le comportement des liens de cette liste <a>.
Le display:block va permettre de donner une largeur fixe et identique à chaque item avec width:100px;
tandis qu'en utilisant height:25px; en même temps que line-height:25px; nous obtenons un centrage parfait du texte.
Une marge extérieure en haut et en bas de 4px avec margin:4px 0; permet de cadrer le menu dans sa "boite" et aucune marge intérieure avec padding:0px;
Nous en profitons maintenant pour mettre une couleur de fond bleue background-color:#6495ED;
et une couleur des caractères color:black;
Nous suprimons maintenant l'aspect souligné par défaut des liens avec text-decoration:none;

.hormenu       { list-style-type:none; padding:0; margin:0; text-align:center; }
.hormenu li    { float:left; }
.hormenu li a  { display:block; width:100px; height:25px; line-height:25px;
                 margin:4px 0; padding:0px;
 		 background-color:#6495ED; color:black; text-decoration:none; }

Vous pouvez voir le résultat ci-dessous:

Espacement des éléments

Mais les menus sont collés et il faut mettre, pour l'esthétique, un espace entre chaque.
Il y a plusieurs façons de le faire:

Soit en utilisant une marge extérieure à gauche margin-left:2px;
ou à droite margin-right:2px;
Soit en définissant une bordure transparente à droite border-right:2px solid transparent;
ou à gauche border-left:2px solid transparent;

.hormenu       { list-style-type:none; padding:0; margin:0; text-align:center; }
.hormenu li    { float:left; }
.hormenu li a  { display:block; width:100px; height:25px; line-height:25px;
                 margin:4px 0; padding:0px;
 		 background-color:#6495ED; color:black; text-decoration:none; }
.hormenu li    { border-right:2px solid transparent;}

Vous pouvez voir le résultat ci-dessous:

Définition au passage de la souris

Maintenant, il faut définir l'aspect que prendra ce même bouton lors du survol de la souris <li a:hover>
Nous allons lui associer une couleur de fond différente background-color:#D3D3D3;
ainsi que changer la couleur du texte en rouge color:#F00;
et souligner le texte text-decoration:underline;:

.hormenu       { list-style-type:none; padding:0; margin:0; text-align:center; }
.hormenu li    { float:left; }
.hormenu li a  { display:block; width:100px; height:25px; line-height:25px;
                 margin:4px 0; padding:0px;
 		 background-color:#6495ED; color:black; text-decoration:none; }
.hormenu li    { border-right:2px solid transparent;}
.hormenu li a:hover { background-color:#D3D3D3; color:#F00; text-decoration:underline;  }

Vous pouvez voir le résultat ci-dessous:

Mise en forme bouton 3D

Effet 3D - solution 1

Il est possible de donner un effet lorsque l'on appuie sur le bouton.
C'est l'effet outset / inset de border.
Les navigateurs modernes savent interprêter border:2px outset #000; et border:2px inset #000;

.hormenu       { list-style-type:none; padding:0; margin:0; text-align:center; }
.hormenu li    { float:left; }
.hormenu li a  { display:block; width:100px; height:25px; line-height:25px;
                 margin:4px 0; padding:0px;
 		 background-color:#6495ED; color:black; text-decoration:none; }
.hormenu li    { border-right:2px solid transparent;}
.hormenu li a:hover { background-color:#D3D3D3; color:#F00; text-decoration:underline;  }
.hormenu li a       { border:2px outset #D3D3D3;  }
.hormenu li a:hover { border:2px inset #D3D3D3;  }