Menu dynamique css à 100%

Soyez le premier à donner votre avis sur cette source.

Vue 24 044 fois - Téléchargée 2 142 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

cs_lanner
Messages postés
131
Date d'inscription
samedi 16 avril 2005
Statut
Membre
Dernière intervention
8 avril 2015

Salut, bug complètement sous IE7 , ne fonctionne que sous FF
nicomilville
Messages postés
3472
Date d'inscription
lundi 16 juillet 2007
Statut
Membre
Dernière intervention
28 février 2014
25
Salut,

@lanner : c'était prévisible, nous connaissons Arto_8000 car il faisait parti de plusieurs débat qui disait qu'internet explorer était de la merde et que firefox était le meilleur navigateur donc très prévisible qu'il ne cherche pas a rendre le code compatible a un navigateur qui pour lui est une merde !

a++

PS : no comment
zugolin
Messages postés
14
Date d'inscription
dimanche 24 juin 2007
Statut
Membre
Dernière intervention
2 mars 2009

Hello!
... et tant que ie fera les 2 tiers des navigateurs ... vaut mieux faire avec !
nicomilville
Messages postés
3472
Date d'inscription
lundi 16 juillet 2007
Statut
Membre
Dernière intervention
28 février 2014
25
oui, mais ce serai bien qu'un jour les navigateurs est moins de différence car c'est usant a force de devoir tout rendre compatible, moi je suis en train de faire une API pour tout rendre compatible sans effort...

a++
gauvain49
Messages postés
6
Date d'inscription
lundi 23 octobre 2006
Statut
Membre
Dernière intervention
13 novembre 2008

Bonjour,

C'est vrai qu'IE a du mal avec le CSS mais, comme dit Zugolin, tant qu'il restera aussi répandu comme navigateur, ce code n'est pas très exploitable.

Toutefois, ça fait du bien de voir que quelqu'un utilise le CSS pour faire une mise en forme un peu plus "dynamique" qu'une banale image d'arrière plan ou qu'un texte en couleur. Ca permet de voir la puissance des feuilles de style quand elles sont bien maîtrisées. Donc, Bravo !!

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.