Oltana.net - [ xhtml / css ] Création d'un menu horizontal

:: [ xhtml / css ] Création d'un menu horizontal ::

Besoin d'un menu horizontal compatible xhtml 1.0 strict pour votre futur site web ?
A la fin de ce tutorial vous serez en mesure d'en créer un !

Nous disposons de peu de chose: un bouton vide de texte créé préalablement et notre éditeur html.

Commençons par mettre en place notre structure html :

Code:

Le menu se fera avec une liste, vous allez pouvoir apprécier le pouvoir des feuilles de style !
Reprennez donc ce code à placer entre les balises <body> et </body>:

Code:

A ce stade vous devez avoir un menu vertical.

La partie xhtml étant terminé, passons à la mise en forme grâce au css.
Ici le code se placera dans les balises couplées <style>.

Nous allons travailler sur les balises <li>, ciblons donc ces balises avec le css:

Code:

div#liste_menu ul li { }

Nous avons un menu vertical, convertissons le en menu horizontal grâce à la propriété float: left; :

Code:

div#liste_menu ul li { float: left; }

Maintenant retirons les puces inesthétiques dans ce genre de menu :

Code:

div#liste_menu ul li { float: left; list-style-type: none; }

Agissons maintenant sur les liens en ajoutant cette ligne de code :

Code:

div#liste_menu ul li a { }

Usons de la propriété display: block pour pouvoir donner une taille à la zone réactive du lien:

Code:

div#liste_menu ul li { float: left; list-style-type: none; }
div#liste_menu ul li a { display: block; }

Et ensuite ajoutons l'image du bouton qui se trouve dans le même répertoire que votre fichier html !

Code:

div#liste_menu ul li { float: left; list-style-type: none; }
div#liste_menu ul li a { display: block; background-image: url('bouton.gif'); width: 116px; height: 31px;} /*le width et le height se réfère au bouton*/

Ajouter une petite propriété pour éviter un dupliquement du bouton, même si on a définit une taille de la zone réactive égale à celle du bouton:

Code:

div#liste_menu ul li { float: left; list-style-type: none; }
div#liste_menu ul li a { display: block; background-image: url('bouton.gif'); width: 116px; height: 31px; background-repeat: no-repeat;}

Donnons un peu plus de style à notre texte en utilisant les diférentes propriété de font:

Code:

div#liste_menu ul li { float: left; list-style-type: none; font-family: Verdana; font-size: 11px; font-weight: bold; text-align: center; }
div#liste_menu ul li a { display: block; background-image: url('bouton.gif'); width: 116px; height: 31px; background-repeat: no-repeat; color: #000000;}

Finalisons le texte.
Nous allons retirer le soulignement du lien ainsi que ce même soulignement lorsqu'on passe la souris dessus, ceci avec la propriété text-decoration passée en "none".

Code:

Changeons la couleur du lien survolé :

Code:

Et descendons un petit peu le texte pour qu'il soit plus centré dans le bouton avec la propriété padding-top dans div#liste_menu ul li a :

Code:

Voilà c'est terminé, le code au complet est le suivant :

Code:

<html>
<head>
<style type="text/css">

div#liste_menu ul li { float: left; list-style-type: none; font-family: Verdana; font-size: 11px; font-weight: bold; text-align: center; }
div#liste_menu ul li a { display: block; background-image: url('bouton.gif'); width: 116px; height: 31px; background-repeat: no-repeat; color: #000000; text-decoration: none; padding-top: 3px;}
div#liste_menu ul li a:hover { text-decoration: none; color: red;}

</style>
</head>
<body>

<div id="liste_menu">
<ul>
<li><a href="#">Menu 01</a></li>
<li><a href="#">Menu 02</a></li>
<li><a href="#">Menu 03</a></li>
<li><a href="#">Menu 04</a></li>
</ul>
</div>

</body>
</html>

Si vous désirez faire un rollover (effet de survol) sur le bouton même il vous suffit d'ajouter une propriété background-image dans la ligne div#liste_menu ul li a:hover :

Code:

div#liste_menu ul li a:hover { text-decoration: none; color: red; background-image: url('bouton_on.gif'); }

Et de prendre ce bouton bien sûr :

A suivre : ajouter un menu déroulant sous chaque bouton ...

:: corven ::