Menu dynamique css à 100%
Description
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
}
Compatibilité (version concept) :
- Internet Explorer 8 Bêta 2+
- Firefox 3.0+
- Opéra (version courrante)
Compatibilité (version compatibilité) :
- Internet Explorer 7+
- Firefox 3.0+
- Opéra (version courrante)
Conclusion :
Je trouve que cela est un très bonne exemple de la puissant que le "hover" en CSS permet. Il y a bien d'autre chose que cela permet comme faire des tooltips sans avoir recours au javascript.
Note : La version compatibilité a été ajouté afin de donner une version compatible avec la plupart des navigateurs courrants. Cependant, cette version comporte de nombreux hacks css pour s'assurer que tous s'afficher bien dans tous les navigateurs. C'est pour cette raison que j'ai laissé l'ancienne version qui est beaucoup plus propre, mais non compatible avec IE 7.
Version(s) alternative(s) :
- http://www.percevalcreation.fr/test.html (posté par gauvain49)
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
}
Conclusion :
Compatibilité (version concept) :
- Internet Explorer 8 Bêta 2+
- Firefox 3.0+
- Opéra (version courrante)
Compatibilité (version compatibilité) :
- Internet Explorer 7+
- Firefox 3.0+
- Opéra (version courrante)
Conclusion :
Je trouve que cela est un très bonne exemple de la puissant que le "hover" en CSS permet. Il y a bien d'autre chose que cela permet comme faire des tooltips sans avoir recours au javascript.
Note : La version compatibilité a été ajouté afin de donner une version compatible avec la plupart des navigateurs courrants. Cependant, cette version comporte de nombreux hacks css pour s'assurer que tous s'afficher bien dans tous les navigateurs. C'est pour cette raison que j'ai laissé l'ancienne version qui est beaucoup plus propre, mais non compatible avec IE 7.
Version(s) alternative(s) :
- http://www.percevalcreation.fr/test.html (posté par gauvain49)
Codes Sources
A voir également
- Menu dynamique css à 100%
- Cv dynamique - Forum PHP
- Menu c - Forum C
- Menu php ✓ - Forum PHP
- Tableau dynamique c++ - Forum C / C++ / C++.NET
- Css map ✓ - Forum PHP
Vous n'êtes pas encore membre ?
inscrivez-vous, c'est gratuit et ça prend moins d'une minute !
Les membres obtiennent plus de réponses que les utilisateurs anonymes.
Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.
Le fait d'être membre vous permet d'avoir des options supplémentaires.