Menu vertical en Css
Date de publication : 15 juin 2008Par : noc
Salut tout le monde , dans ce nouveau tutoriel nous allons voir comment créer un menu vertical en html et css.
Comme nous l’avons déjà vu avec le menu horizontal , un menu est constitué de deux parties , une partie html et une autre Css.
La partie html :
<html>
<head>
<title>Mon menu vertical</title>
</head>
<body><ul>
<li><a href=”">Élément 1</a></li>
<li><a href=”">Élément 2</a></li>
<li><a href=”">Élément 3</a></li>
<li><a href=”">Élément 4</a></li>
<li><a href=”">Élément 5</a></li>
</ul></body>
</html>
comme vous auriez du le constater , dans la partie html on a pas changé grand chose , par rapport au menu horizontal , et c’est justement la qu’on comprend que tout le travail ce fait au niveau des css.
Je vous invite quand même a voir le résultat jusque là. cliquez-ici
La partie Css :
le code suivant doit être placé entre les balises <head> et </head> de notre fichier html.
<style type=”text/css”>
ul { list-style-type:none; margin:0; padding:0;}
li{ margin:0; padding:0;}
a {text-decoration:none; display:block; line-height:30px; width:150px; background:#333333; color:#FFFFFF;}
a:hover{ background:#33CC33}
</style>
Si vous remarquez bien c’est dans cette partie qu’ il y a eu quelques petits changements ,
Tout d’abord dans la première ligne on enlève les puces de la liste , les marges internes et externes on les remet à zéro.
dans la deuxième ligne on enlève les marges internes et externes des éléments de la liste.
et tout le travail se fait au niveau de la balise a , alors la ce qu’on va faire , c’est lui enlevé le soulignement tout d’abord avec text-decoration:none , ensuite on va définir le lien comme étant un block avec display block , dans ce cas la , il lui faut absolument une largeur et une hauteur , c’est fait avec line-height ,et le width , ensuite on va mettre l’arrière plan en couleur grise ,et le texte en blanc.
la dernière ligne c’est pour le survole de la souris , on change la couleur d’arrière plan et voila le travail est fait 
vous pouvez voir le résultat sur cette page en cliquant ici
et voici un petit exemple que j’ai fait pour vous.
j’attends vos questions avec deux-patience 
www.hustoo.net
21 juin 2008 à 18:59
merci noc tout est claire,j’attends votre prochain tutoriel