28172 sujets

CSS et mise en forme, CSS3

Menu déroulant

Bonjour,
Je n'ai pas vraiment compris ton problème puisque j'ai essayé sous mozilla et ie8 et le menu se déroule parfaitement. Sois plus clair peut être. Smiley cligne
Le menu ne fonctionne, effectivement pas avec IE6, et c'est tout à fait normal puisqu'IE6 ne sait pas interpréter la pseudo classe :hover sur tout autre élément que a.

Un bon menu déroulant doit intégrer du Javascript.
Laurie-Anne a écrit :
(...) IE6 ne sait pas interpréter la pseudo classe :hover sur tout autre élément que a.

Un bon menu déroulant doit intégrer du Javascript.


Ou ajouter un "hack" pour IE6, très pratique pour justement permettre à IE6 de "comprendre" les :hover, :active et :focus

1. Télécharger le fichier.htc ici :
http://www.xs4all.nl/~peterned/csshover.html#changes

2. Ajouter dans les <head> :

<style type="text/css"><!--
	body { behavior:url(chemin/fichier.htc) }
--></style>



3. Vous pouvez utiliser les pseudo classes CSS :

li:hover {
	background:red;
	}

input:focus {
	border:1px solid red;
	}




c'est biennnn ! Smiley biggrin
titeuf a écrit :
Ou ajouter un "hack" pour IE6, très pratique pour justement permettre à IE6 de "comprendre" les :hover, :active et :focus

Sauf que ce «hack» c'est tout simplement un script JS. Smiley lol

Et, selon moi, un bon menu déroulant doit utiliser JavaScript non pas seulement pour la compatibilité IE6 (à la rigueur on l'obtiendrait en rendant les items de premier niveau cliquables, et en faisant des pages d'index de rubrique... ce qui serait bien dans l'absolu). Un bon menu déroulant utilise JavaScript pour gérer la navigation au clavier, et optimiser l'ergonomie en limitant les fermetures intempestives de sous-menus.
Modifié par Florent V. (30 Jun 2009 - 19:37)
Florent V. a écrit :
Sauf que ce «hack» c'est tout simplement un script JS. Smiley lol

ok, mais peut importe ... c'est seulement pour le vieil IE6

a écrit :
gérer la navigation au clavier

j'avoue que je n'avais jamais pensé à cela Smiley eek
c'est vrai que mes items de premier niveau sont toujours cliquables

a écrit :
optimiser l'ergonomie en limitant les fermetures intempestives de sous-menus

là je vois pas ?
par exemple un menu comme ça : http://www.spip.cri01.org/spip.php?rubrique28
prblm ergonomique ? fermetures intempestives ?


t'as un exemple contraire en JS qui va bien ?
je suppose que tes menus restent accessibles même si JS et désactivé ?
Modifié par titeuf (02 Jul 2009 - 10:07)
titeuf a écrit :
là je vois pas ?
par exemple un menu comme ça : http://www.spip.cri01.org/spip.php?rubrique28
prblm ergonomique ? fermetures intempestives ?

Si le pointeur de la souris suit une trajectoire en diagonale pour aller d'un item de premier niveau à un item de second niveau (dans le sous-menu), il passe sur un autre item de premier niveau, ce qui a pour conséquence de fermer le premier sous-menu, d'en ouvrir un autre, etc. Bref, c'est la merde. Pour éviter ça, l'utilisateur doit:
- oublier qu'on lui a appris que la trajectoire la plus courte entre deux points est la ligne droite;
- déplacer le pointeur de la souris vers la droite, s'assurer qu'il est bien sur le sous-menu souhaité, et ensuite descendre le pointeur de la souris sur l'item de deuxième niveau souhaité.

Si l'utilisateur n'a pas un contrôle parfait de ses mouvements (dans le cas d'un léger handicap moteur par exemple), c'est mort.
Si l'utilisateur utilise le pavé tactile d'un ordinateur portable, c'est mort.
Si...

titeuf a écrit :
t'as un exemple contraire en JS qui va bien ?

Superfish avec le plugin HoverIntent est pas mal pour gérer accessibilité au clavier et limitation des fermetures intempestives.

titeuf a écrit :
je suppose que tes menus restent accessibles même si JS et désactivé ?

Ça ne s'automatise pas et ça demande une bonne conception du menu. Qui peut aller jusqu'à ne présenter que les items de premier niveau si on a bien mis en place des index de rubriques (et index de sous-rubriques le cas échéant).
Sujet clos
Aller à