Créer un menu avec commentaires en survol

Vous avez envie d'afficher des détails supplémentaires lorsque votre visiteur survole un lien de votre menu. La plupart du temps, c'est Flash ou javascript (et sa gestion de calques affichés/masqués) qui permettent de réaliser cela.

Pourtant, il existe une manière plus accessible d'y arriver, sans langage de programmation, ni Flash.

En CSS, nous allons utiliser la balise <a> à laquelle nous intégrerons la balise que nous allons masquer et afficher grâce à l'attribut "display: none;" et "display: block;"

Code CSS :

	
ul {
list-style-type: none;
margin:0;
padding:0;
position: absolute; 
top: 2em; 
 /* positionnement du menu, */
 /* que vous pouvez changer à loisir */
left: 3em;
width: 100%; /* précision pour Opera */
}

li {
float: left;
}

.menu a {       
 /* définition de chaque bouton du menu */
width: 100px;	   
 /* largeur du bouton, que vous pouvez changer à loisir */
height: 20px;
float: left;
display: block;
text-align: center;
border: 1px solid #fff; 
text-decoration: none;
color: #000;
background: #fff;
}

.menu a:hover {
color: #411;
background: #AAA;
border: 1px solid gray; 
border-bottom: 0px;
color: #fff;
}

.menu a span {     
 /* définition de la balise <span> incluse dans <a> */
display: none;
}

.menu a:hover span {   
 /* définition de la balise <span> au survol */
display: block;
position: absolute;
top: 20px;
left: 0;
width: 600px;       
 /* largeur de la zone de commentaires, */
 /*selon la taille du menu */
text-align: left;
border-top: 1px solid gray;
color: #000;
}

Et le code HTML :

<ul class="menu">
<li><a href="">Menu 1
 <span>Commentaires 1</span></a></li>
<li><a href="">Menu 2
 <span>Commentaires 2</span></a></li>
<li><a href="">Menu 3
 <span>Commentaires 3</span></a></li>
<li><a href="">Menu 4
 <span>Commentaires 4</span></a></li>
<li><a href="">Menu 5
 <span>Commentaires 5</span></a></li>
<li><a href="">Menu 6
 <span>Dernier commentaire</span></a></li>
</ul>

Cet article a été réalisé par Alsacréations sous licence creative commons