Un menu avec commentaires au survol
Le 27-02-2005 par Raphael dans Construction de menus en CSS.
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 vous permettent de réaliser vos voeux.
Pourtant, il existe une manière plus compatible de réaliser cette technique sans langage de programmation, ni flash.
En CSS, nous allons utiliser la balise <a> à laquelle nous intégrerons la balise <span> que nous allons masquer et afficher grâce à l'attribut "display: none;" et "display: block;" (Voir le résultat ici)
Note : /* ces textes sont des commentaires explicatifs, ils peuvent être supprimés*/
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> inclue 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 voilà le code HTML ::
<ul class="menu">
<li><a href="">Menu 1<span>Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Vivamus ipsum dui, vulputate ut, eleifend pretium, tristique
a, velit. Morbi lacus</span></a></li>
<li><a href="">Menu 2<span>Cras eu mi vel pede
tempus dignissim. Etiam malesuada scelerisque massa. Maecenas metus sem, consectetuer
quis, rhoncus non, euismod id, elit</span></a></li>
<li><a href="">Menu 3<span>Cras
fringilla. Integer in neque. Nulla massa. Vestibulum eleifend mattis erat</span></a></li>
<li><a href="">Menu 4<span>Sed bibendum vehicula sem. Donec venenatis diam eu
erat. Ut rutrum sem ut erat</span></a></li>
<li><a href="">Menu 5<span>Phasellus tristique,
turpis in nonummy luctus, eros enim pellentesque felis, sed venenatis quam
orci quis nisl. Nulla id nunc. Nam porttitor volutpat erat<em>can't</em> she
do?</span></a></li>
<li><a href="">Menu 6<span>Dernière phrase bidon !</span></a></li>
</ul>
A vous de modifier et personnaliser vos paramètres !
Si certaines écritures des CSS vous paraissent obscurs, par exemple .menu a:hover span, vous auez des explications dans l'article sur les héritages et imbrications.
(inspiré librement de http://www.meyerweb.com/eric/css/edge/popups/demo.html)
Un problème, une question ?
Vous avez des soucis avec ce tutoriel ? Venez en discuter dans le salon Spécifique aux tutoriels et articles du Forum Alsacréations.
