Menus déroulants, en css, j'ai des petits problemes :P

(reprise du message précédent)

Je crois que Florent faisait de l'humour

laruiss a écrit :
"les menus CSS, c'est bien, mais une couche javascript par dessus permet de gagner beaucoup en accessibilité et en ergonomie".

</mon_avis>

@+

Le problème c'est que justement ce n'est pas bien du tout.

Patidou, pourais tu m'expliquer comment faire pour leur donner al mise en forme que je veux (car si j'agit sur les li ca donne l'apparence a tout :s )

Patidou a écrit :
Je crois que Florent faisait de l'humour

Non, non.

Patidou a écrit :
Le problème c'est que justement ce n'est pas bien du tout.

Voilà.

Une solution qui pose des problèmes sérieux pour l'accès aux contenus et le déplacement dans le site à une partie importante des utilisateurs... ben c'est une solution à rejeter.

L'affirmation correcte serait donc, à mon avis: «Les menus déroulants CSS, c'est mal. Une surcouche JavaScript de qualité, et un codage CSS correct, permettent de gagner suffisamment en accessibilité et ergonomie pour rendre ce type de menu acceptable, voire intéressant.»

Pour le rendu sans JavaScript, il y a deux solutions:
- soit les sous-menus sont affichés et mis en forme de façon à ce qu'ils soient tous visibles;
- soit on affiche uniquement les intitulés de premier niveau, qui doivent être des liens vers des pages d'index de rubrique permettant d'accéder aux contenus.

no-fonte a écrit :
Patidou, pourais tu m'expliquer comment faire pour leur donner al mise en forme que je veux (car si j'agit sur les li ca donne l'apparence a tout :s )

En utilisant CSS.

oui je me doutes
mais comment ? car si je donne la propritété background a li tout le menu va en heriter, et je veux que les sous menus soient differents

no-fonte a écrit :
car si je donne la propritété background a li tout le menu va en heriter, et je veux que les sous menus soient differents

Il faut utiliser des sélecteurs CSS plus précis. Soit tu utilises le combinateur de descendant, par exemple:

#menu > li {
	/* Styles pour les items de premier niveau */
}
#menu > li > ul > li {
	/* Styles pour les items de deuxième niveau */
}

L'inconvénient est alors qu'Internet Explorer 6 ne comprend pas cette syntaxe (le combinateur de descendant, c'est-à-dire le symbole ">" dans le sélecteur).

Pour être compatible avec IE6, il faudra alors passer par des classes sur les éléments. Par exemple, tu ajoutes une classe "first-level" sur tous les LI de premier niveau, et tu peux faire:

#menu li.first-level {
	/* Styles pour les items de premier niveau */
}
#menu li.first-level li {
	/* Styles pour les items de deuxième niveau, voire troisième et quatrième... */
}

Modifié par Florent V. (06 May 2009 - 14:13)

Heu...

Florent, les descendants directs sont-ils vraiment nécessaires? Un truc du genre ne marcherait pas ?

#menu ul li {
/*couleur de fond bleue pour tout le monde*/
background-color: blue;
}
#menu ul li li {
/*couleur de fond rouge pour les enfants*/
background-color: red;

}

Modifié par Patidou (06 May 2009 - 14:45)

Patidou a écrit :
Florent, les descendants directs sont-ils vraiment nécessaires? Un truc du genre ne marcherait pas ?

Oui, il faut juste tout nier/remettre à zéro, et dans certains cas ça n'est pas vraiment possible, et au final c'est lourd, et on se plante en faisant des modifs en amont sans les annuler en aval, etc.

Rajouter une classe sur chaque LI de premier niveau est sensiblement plus simple. Utiliser le combinateur d'enfant (descendant direct) est plus simple encore, mais limité (IE6).