Menu vertical pure CSS (Personnalisable même par des débutants ;-) ) - Blog astuces web et SEOBlog astuces web et SEO

Hi all,
Les menus font souvent une partie importante voir très importante lors de la création d’un site web. Cette fois je vous propose un menu vertical en CSS avec des explications détaillées pour vous aider à le personnaliser 🙂

Un hack CSS a été utilisé pour ajuster l’affichage sous IE (bah on est obligé! ça déconne toujours IE 😀 )

Voila donc le code utilisé avec un aperçu pour le menu 🙂

Démo menu vertical css

Code:

<!--                                              
Astuce trouvée sur http://blog.galerie-cesar.com
                                             --->
<!--
body {
font-family: verdana;
font-size: 12px;
}
h4 {
display: block;
width: 220px;
height: 44px;
background-image: url('bg.jpg');
background-repeat: repeat-x;
padding-top: 12px;
color: white;
text-align: center;
}
.menu {
margin-top: -30px;		/*ajustement*/
margin-left: -7px;		/*ajustement*/

}
ul.menu li{
	list-style:none;		/*trés moches les petites cercles dans la liste non? :p */
}
ul.menu li a{
	text-decoration: none;	/*pas besoin de la ligne moche en dessous du lien :p */
	display: block;			/*permet d'affichet la liste en tant que block*/
	padding: 2px 3px;		/*ajustement*/
	background: black;		/*Si vou voulez modifier la couleur du fond d'écran des lien ;) */
	color: white;			/*couleur des liens*/
	width: 180px;			/*largeur du block contenant chaque lien*/
	height: 25px;			/*largeur du block contenant chaque lien*/
	padding-top: 8px;		/*ajustement*/
	padding-left: 10px;		/*ajustement*/
	margin-left: -20px;		/*ajustement*/
	border-bottom: 1px dotted red;		/*la ligne pointillé en dessous de chaque block*/

}
ul.menu li a:hover{ 		/*le hover cad la forme des liens quand la souris passe dessus*/
	background: none;	 	/*pour enlever le fond noir des liens*/
	width: 210px; 			/*modification du largeur vu l'image qu'on va mettre comme fond*/
	background-image: url('images/hover.gif'); 		/*l'image de fond*/
	background-repeat: no-repeat; 					/*on ne veut pas que l'image de fond se repete */
	margin-left: -28px; 							/*ajustement*/
	width: 210px; 			/*on modifie la largeur pour pouvoir contenir l'image de fond*/
	font-weight: bold; 		/*on modifie le type du texte et on le met en gras*/
	text-align: center; 		/*on centre le texte*/
	height: 39px; 			/*c'est la hauteur de l'image de fond*/
	margin-bottom: -10px; 				/*ajustement*/
	padding-top: 5px; 			/*pour mettre le lien au milieu verticalement*/
	border: none; 				/*on enleve le border precedemment appliqué sur les lien <a>*/
}

-->

<!--                 - HACK CSS POUR IE                          -->
<!--[if IE]>                    
<mce :style type="text/css">< ! 
.menu {
margin-top: -20px;		/*ajustement pour IE*/
}
ul.menu li a{
	padding-left: 10px;		/*ajustement pour IE*/
	margin-left: 20px;		/*ajustement ajustement pour IE*/
	width: 193px;
	height: 29px;
}
ul.menu li a:hover{ 		/*le hover cad la forme des liens quand la souris passe dessus*/
	margin-left: 13px; 							/*ajustement*/
}
-->

&lt; ![endif]--&gt;
<div id="menucss">
<h1>Menu vertical pure CSS | Blog Galerie Cesar</h1>
<h4>Titre du menu</h4>
<ul class="menu">
	<li><a href="#">Lien 1</a></li>
	<li><a href="#">Lien 2</a></li>
	<li><a href="#">Lien 3</a></li>
	<li><a href="#">Lien 4</a></li>
	<li><a href="#">Lien 5</a></li>
</ul>
<a href="http://blog.galerie-cesar.com/menu-vertical-pure-css-personnalisable-meme-par-des-debutants/">Retour a l'article</a></div></mce>

<!--

Astuce trouvée sur http://blog.galerie-cesar.com

--->

<!--

body {

font-family: verdana;

font-size: 12px;

}

h4 {

display: block;

width: 220px;

height: 44px;

background-image: url('bg.jpg');

background-repeat: repeat-x;

padding-top: 12px;

color: white;

text-align: center;

}

.menu {

margin-top: -30px; /*ajustement*/

margin-left: -7px; /*ajustement*/

}

ul.menu li{

list-style:none; /*trés moches les petites cercles dans la liste non? :p */

}

ul.menu li a{

text-decoration: none; /*pas besoin de la ligne moche en dessous du lien :p */

display: block; /*permet d'affichet la liste en tant que block*/

padding: 2px 3px; /*ajustement*/

background: black; /*Si vou voulez modifier la couleur du fond d'écran des lien ;) */

color: white; /*couleur des liens*/

width: 180px; /*largeur du block contenant chaque lien*/

height: 25px; /*largeur du block contenant chaque lien*/

padding-top: 8px; /*ajustement*/

padding-left: 10px; /*ajustement*/

margin-left: -20px; /*ajustement*/

border-bottom: 1px dotted red; /*la ligne pointillé en dessous de chaque block*/

}

ul.menu li a:hover{ /*le hover cad la forme des liens quand la souris passe dessus*/

background: none; /*pour enlever le fond noir des liens*/

width: 210px; /*modification du largeur vu l'image qu'on va mettre comme fond*/

background-image: url('images/hover.gif'); /*l'image de fond*/

background-repeat: no-repeat; /*on ne veut pas que l'image de fond se repete */

margin-left: -28px; /*ajustement*/

width: 210px; /*on modifie la largeur pour pouvoir contenir l'image de fond*/

font-weight: bold; /*on modifie le type du texte et on le met en gras*/

text-align: center; /*on centre le texte*/

height: 39px; /*c'est la hauteur de l'image de fond*/

margin-bottom: -10px; /*ajustement*/

padding-top: 5px; /*pour mettre le lien au milieu verticalement*/

border: none; /*on enleve le border precedemment appliqué sur les lien <a>*/

}

-->

<!--[if IE]>

<mce :style type="text/css">< !

.menu {

margin-top: -20px; /*ajustement pour IE*/

}

ul.menu li a{

padding-left: 10px; /*ajustement pour IE*/

margin-left: 20px; /*ajustement ajustement pour IE*/

width: 193px;

height: 29px;

}

ul.menu li a:hover{ /*le hover cad la forme des liens quand la souris passe dessus*/

margin-left: 13px; /*ajustement*/

}

-->

< ![endif]-->

<h1>Menu vertical pure CSS | Blog Galerie Cesar</h1>

<h4>Titre du menu</h4>

</ul>

<a href="http://blog.galerie-cesar.com/menu-vertical-pure-css-personnalisable-meme-par-des-debutants/">Retour a l'article</a></div></mce>

Les images utilisées:

(click droit ensuite « enregistrer sous »)

J’ai utilisé ce menu lors de la creation site internet : www.satmultimedia.be

Merci d'évaluer l'article: Menu vertical pure CSS (Personnalisable même par des débutants 😉 )

Il n'y a pas encore d'avis. Soyez le premier à évaluer cet article.