Menu dynamique css à 100%

Soyez le premier à donner votre avis sur cette source.

Vue 24 621 fois - Téléchargée 2 205 fois

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
}

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

Ajouter un commentaire Commentaires
Messages postés
1044
Date d'inscription
lundi 7 mars 2005
Statut
Membre
Dernière intervention
13 juillet 2010
7
Cyrphp -> Je nuances la source que tu as posté. Il est impossible de faire des sous-menus à cause principalement de l'utilisation de la balise a. Toutes les exemples postés avant (y compris la mienne) peuvent avoir des sous-menus à l'infini ce que la source que tu présentes ne peut pas faire. C'est pas vraiment la même chose que la source que j'ai posté.
Messages postés
253
Date d'inscription
vendredi 13 juin 2003
Statut
Membre
Dernière intervention
18 mai 2009

Faut un bac +5 pour utiliser ce menu :)
Messages postés
18
Date d'inscription
dimanche 17 octobre 2004
Statut
Membre
Dernière intervention
13 avril 2009

Zut , url trop longue :
http://yidille.free.fr/plux/valign/?16-
Cliquez sur le mot ICI en gras pour voir la page démo ,

sinon , recomposé l'url :
allez dans le repertoire :
http://gcyrillus.free.fr/essai/
et le fichier est :
menu-deroulan-1niveau-compatible-IE-6-sans-js-valide.html

Bonsoir.
Messages postés
18
Date d'inscription
dimanche 17 octobre 2004
Statut
Membre
Dernière intervention
13 avril 2009

bonsoir/bonjour
bon un peu tardif ce retour sur le sujet , entre temps et a propos du (des) zip du site , c'est Alzip qui scotche sur les archives ...

Je viens de mettre en ligne un menu deroulant basé sur li:hover .

Avec une surcouche css en commentaire conditionnel pour IE6 pour le rendre compatible sans js .
Le fonctionnement dans IE6 est un peu different , c'est basé sur le click (a:active) , ç'est pas top , et son fonctionement ressemble fort a un menu en js basic ...

voila : http://gcyrillus.free.fr/essai/menu-deroulan-1niveau-compatible-IE-6-sans-js-valide.html

Tu peut le joindre a ton archive en tout ou partie si tu l'estime interessant . Je le prefere de loin a la bricole de bidouille basé sur l'image map , mais j'aime personnellement pas trop son comportement dans IE6 , enfin , c'est toi qui voit.

GC
Messages postés
1044
Date d'inscription
lundi 7 mars 2005
Statut
Membre
Dernière intervention
13 juillet 2010
7
Bon le zip a été uploadé et j'ai rajouté dans la conclusion la version alternative de gauvain. Cyrphp si tu hosts ton script sur un site je vais aussi le rajouté le lien vers ta version aussi.
Afficher les 52 commentaires

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.