Et oui vous n'avez pas rêvé, un menu entièrement dynamique fait avec seulement du css sans la moindre ligne de javascript. Oublier ces scripts avec des centaines de lignes de code et admirer ces 22 lignes de code CSS. Bon assez parler voici un peu plus de détails.
Le principe (côté HTML) :
Chaque élément se décompose comme ceci :
<div class="menu">
<span><p><!-- Texte afficher dans la boîte --></p></span>
<span class="content"><!-- Contenu affiché --></span>
</div>
Le texte affiché dans la boîte est textuellement ce qui sera affiché dans le
menu.
Le contenu affiché peut soit être du texte (dans ce cas il doit être encadré de
balise p) ou d'un autre élément pour des sous-menus à plusieurs niveaux.
Le principe (côté CSS) :
div.menu span.content {
display: none;
}
Par défaut, l'élément du contenu n'est pas affiché.
div.menu:hover > span.content {
display: inline;
position: absolute;
}
Quand on passe la souris au-dessus de la zone titre (qui est contenu dans le div
de classe menu), le contenu devient affiché.
Pour qu'il soit affiché par dessus de tout j'ai mis la position à absolu.
div.menu span p {
padding: 5px;
margin: 0px 3px 3px 0px;
display: inline-block;
color: #ffffff;
background-color: #3333ee;
width: 200px;
border: 1px solid #000000;
}
Le display inline-block est utilisé pour que l'on puisse définir la largeur de
chaque p. Si on avait utilisé un display block, les éléments auraient été
affichés en dessus et non à côté.
Paramétrage :
div.menu span p {
padding: 5px;
margin: 0px 3px 3px 0px; <-- Espacement entre chaque bloc
display: inline-block;
color: #ffffff;
background-color: #3333ee; <-- Couleur d'arrière plan des menus
width: 150px; <-- Largeur de chaque élément
border: 1px solid #000000; <-- Bordure de chaque élément
}