Comment superposé un sous-menu deroulant sur une div sans problème?

Bonsoir à tous,
je travaille actuellement sur un site qui doit avoir un menu horizontal déroulant. J'ai fait le menu totalement en CSS. Juste en dessous du menu j'ai placé une div pour contenir d'autre éléments du site. Le problème c'est que lorsque le menu se déroule, il se place sous la div.
J'ai utilisé la propriété z-index:-1 sur la div. Le menu se déroule effectivement sur la div. Mais le nouveau problème c'est que aucun lien se trouvant dans la div n'est actif(C'est le seul problème que j'ai relevé, peut-être y en a-t-il d'autres?). Sans le z-index, les liens sont actifs avec le problème cité précédemment.
Quelqu'un peut-il m'aider à trouver une solution? Merci pour tout,

le z-index du div contenant le menu dois être supérieur au div suivant - si tu a ton menu en dehors de tout div - c'est le z-index de ce dernier qui doit être supérieur.

<div avec z-index2><ul>menu</ul></div>
<div avec z-index1>contenu</div>

ou

<div>
<ul avec z-index2>menu</ul>
<div avec z-index1>contenu</div>
</div>

Salut,

pour rappel le z-index n'est utilisable que sur des éléments positionnés.

D'autre part les menus full css posent tous des problèmes d'accessibilité (typiquement il est impossible de naviguer au clavier -tabulations- dans les différents éléments LI). Il vaut donc mieux se tourner vers des solutions à base de JavaScript (ou mieux encore : ne pas faire de menu déroulant ).

[mode avocat du diable menu deroulant]

tu peux utiliser position:relative sans donner de coordonnées pour appliquer le z-index et ainsi bypasser la restriction liée à ce dernier;

pour tous les <li><a> de tes menus volants, utilises tabindex=-1 sur le <a> pour éviter le problème d'accessibilité tablulation mentionné par Heyoan

[/mode avocat du diable menu deroulant]

webdesign-fr a écrit :
tu peux utiliser position:relative sans donner de coordonnées pour appliquer le z-index

Euh... donc le positionner.

webdesign-fr a écrit :
pour tous les <li><a> de tes menus volants, utilises tabindex=-1 sur le <a> pour éviter le problème d'accessibilité tablulation mentionné par Heyoan

/me se pince pour vérifier !
* utilisation d'une valeur incorrecte de tabindex.
* même valeur de tabindex sur tous les liens.
* ... pour éviter un problème d'accessibilité.

Je suppose que ce hack est plutôt destiné à IE6 puisque dans FF2+ il interdit purement et simplement le focus sur les liens (bonjour l'accessibilité).

Et sinon : pourquoi diable vouloir se faire l'avocat du diable dans ce cas précis ?
Modifié par Heyoan (13 Aug 2009 - 20:04)

Heyoan a écrit :
Euh... donc le positionner.

Effectivement

Heyoan a écrit :
* utilisation d'une valeur incorrecte de tabindex.

je concède ... j'étais même pas au courant, du coup, que les valeurs devait être comprises entre 0 et 32767

Heyoan a écrit :
* même valeur de tabindex sur tous les liens.

alors la je dis c'est OK ... cela semble autorisé dans la définition du W3C

a écrit :
Elements that have identical tabindex values [...].

Heyoan a écrit :
* ... pour éviter un problème d'accessibilité.

ben oui ... c'est notre boulot en temps que web designer d'assurer que tout est mis en oeuvre pour améliorer l'accessibilité du site. Perso je préfère cette solution, qui a un effet positif sur le référencement, plutôt que de tout mettre dans un fichier js ... externe bien sûr et qui n'est pas lu/compris par les moteurs de recherche.

Heyoan a écrit :
Je suppose que ce hack est plutôt destiné à IE6 puisque dans FF2+ il interdit purement et simplement le focus sur les liens (bonjour l'accessibilité).

non non c'est pour tout ceux qui veulent/doivent utiliser leur clavier pour naviguer. Je suis pas sûr de suivre l'histoire de FF2+ interdisant le focus sur les liens

Heyoan a écrit :
Et sinon : pourquoi diable vouloir se faire l'avocat du diable dans ce cas précis?

Parce que j'en utilise de partout des menus volants

webdesign-fr a écrit :
alors la je dis c'est OK ... cela semble autorisé dans la définition du W3C

Je ne dis pas que c'est invalide : je dis que si c'est pour mettre des tabindex qui ont tous la même valeur (en supposant que cette valeur soit valide) il ne sert alors à rien de les mettre.

webdesign-fr a écrit :
ben oui ... c'est notre boulot en temps que web designer d'assurer que tout est mis en oeuvre pour améliorer l'accessibilité du site.

Ma remarque était bien sûr ironique puisque ta "solution" rend tes liens inaccessibles dans tous les navigateurs que j'ai testés (y compris IE6). Et au cas où on ne parlerait pas de la même chose j'entends par "navigation au clavier" le fait d'utiliser la touche de tabulation (TAB) pour passer d'un lien à l'autre. Je t'invite à essayer avec ce code :

<p><a href="#">un lien accessible via la tabulation</a></p>
<p><a href="#" tabindex="-1">un lien inaccessible via la tabulation</a></p>
<p><a href="#" tabindex="-1">un lien inaccessible via la tabulation</a></p>
<p><a href="#" tabindex="-1">un lien inaccessible via la tabulation</a></p>
<p><a href="#">un lien accessible via la tabulation</a></p>
<p><a href="#">un lien accessible via la tabulation</a></p>

webdesign-fr a écrit :
Perso je préfère cette solution, qui a un effet positif sur le référencement, plutôt que de tout mettre dans un fichier js ... externe bien sûr et qui n'est pas lu/compris par les moteurs de recherche.

Hem... je serais curieux de lire ta source à ce sujet. Ou bien une fois encore on ne parle pas de la même chose : un script JavaScript non intrusif se contente de remanier une liste UL / LI / A existante dans le code html (et donc parfaitement accessible). En cas de désactivation les liens apparaissent simplement déroulés, ce qui n'est peut-être pas très esthétique mais tout à fait accessible au clavier.

Heyoan,

Heyoan a écrit :
Je ne dis pas que c'est invalide : je dis que si c'est pour mettre des tabindex qui ont tous la même valeur (en supposant que cette valeur soit valide) il ne sert alors à rien de les mettre.

J'utlilise le tabindex uniquement sur le lien des menus 'volants':

<ul id="nav">
<li><a>Lien 1 visible de tous</a></li>
<li><a>Lien 2 visible de tous</a>
<ul>
<li><a tabindex="-1">Lien Menu 1 non accessible en tabulant</a></li>
<li><a tabindex="-1">Lien Menu 2 non accessible en tabulant</a></li>
</ul></li>
<li><a>Lien 3 visible de tous</a></li>
</ul>

Comme tu t'en doute ma ul#nav ul est le menu volant.

De cette manière l'utilisateur voyant qui néanmoins utilise la touche tab n'est pas surpris de ne plus voir le focus du tab sur le menu car il a disparu dans les menus volants.

C'est clair que pour un logiciel lecteur d'écran, le fait que les tabs passent ou non par les menus volants ne cause aucun problème étant donné que le lien est 'lu' ...

Heyoan a écrit :
Hem... je serais curieux de lire ta source à ce sujet. Ou bien une fois encore on ne parle pas de la même chose :

yop, je pensais que tu voulais dire tout mettre dans le fichier js (un peu comme les menus volants DW d'antant) et non pas seulement de l'utiliser pour cacher / faire apparaitre le menu.

Mon but étant bien entendu que le design et les fonctionnalités du site soient maintenus que le javascript soit activé ou non. C'est pour cela que je préfère utiliser HTML et CSS plutôt que javascript pour mes menus ... mais ton point est tout aussi valide

webdesign-fr a écrit :
De cette manière l'utilisateur voyant qui néanmoins utilise la touche tab n'est pas surpris de ne plus voir le focus du tab sur le menu car il a disparu dans les menus volants.

Pour rappel, que l'on soit voyant ou non, lorsque l'on navigue au clavier l'idée est de pouvoir accéder au lien (typiquement en appuyant sur la touche Entrée) : voir ou non le focus n'a vraiment rien à faire ici !

Je t'invite à reprendre ton exemple ou le mien et à activer les liens qui ont un un tabindex="-1" sans te servir d'une souris ou d'un touchpad !
Modifié par Heyoan (13 Aug 2009 - 23:47)

Heyoan a écrit :
Pour rappel, que l'on soit voyant ou non, lorsque l'on navigue au clavier l'idée est de pouvoir accéder au lien (typiquement en appuyant sur la touche Entrée) : voir ou non le focus n'a vraiment rien à faire ici

Ceci n'est pas mon point de vue, c'est justement parce qu'on ne voit pas le lien des menus volants que j'utilise le tabindex=-1 pour les sortir de l'ordre de tabulation et pas seulement parce que le focus est "invisible".

Heyoan a écrit :
Je t'invite à reprendre ton exemple ou le mien et à activer les liens qui ont un un tabindex="-1" sans te servir d'une souris ou d'un touchpad !

Mais non ... le but est de les faire disparaitre de l'ordre de tabulation

Et du coup, on accède comment aux pages O_o?

webdesign-fr a écrit :
Ceci n'est pas mon point de vue, c'est justement parce qu'on ne voit pas le lien des menus volants que j'utilise le tabindex=-1 pour les sortir de l'ordre de tabulation et pas seulement parce que le focus est "invisible".
...
Mais non ... le but est de les faire disparaitre de l'ordre de tabulation

Je pense qu'il est temps de revoir la définition de l'Accessibilité du Web. Je cite :

a écrit :
« Mettre le web et ses services à la disposition de tous les individus, quel que soit leur matériel ou logiciel, leur infrastructure réseau, leur langue maternelle, leur culture, leur localisation géographique, ou leurs aptitudes physiques ou mentales. »

Tu t'intéresses au rendu graphique alors que je te parle d'accéder aux liens.

Mais bon ! Je ne vais pas m'acharner plus que ça...

Bonne continuation.

Laurie-Anne a écrit :
Et du coup, on accède comment aux pages O_o?

2 deux 'clicks' au lieu d'un - dans mon cas le menu volant ne sert qu'a accéder aux pages qui sont deux niveaux en dessous. Exemple -http://www.wduk.co.uk: les onglets de la nav principale sont accessible avec souris et clavier. Le menu volant des services est accessible uniquement avec la souris mais les pages de service individuelle sont quand même accessible en passant par la page 'services'.

Heyoan a écrit :
Je pense qu'il est temps de revoir la définition de l'Accessibilité du Web. Je cite :

Donc si tu as une nav avec 10 liens principaux et chaque lien principal a 10 sous-liens en 'menu volant', tu préconiserais de passer au travers de cette centaine de liens en tabulant plutôt que de les éviter, pour 'améliorer' l'accessibilité?

Heyoan, je comprends ton point de vue, je ne le partage pas à 100% c'est tout

Bon alors juste parce que tu insistes : l'accessibilité concerne le fait de pouvoir accéder à un contenu. Comme tout le monde, de gré ou de force, ne dispose pas d'une souris, les pages nécessitant de cliquer sur un lien pour y accéder ne seront jamais visitées par ces visiteurs en question (CQFD). Il ne s'agit pas en l'occurrence d'une question de "point de vue".

Heyoan a écrit :
Bon alors juste parce que tu insistes : l'accessibilité concerne le fait de pouvoir accéder à un contenu. Comme tout le monde, de gré ou de force, ne dispose pas d'une souris, les pages nécessitant de cliquer sur un lien pour y accéder ne seront jamais visitées par ces visiteurs en question (CQFD). Il ne s'agit pas en l'occurrence d'une question de "point de vue".

Mais si en 2 'clicks' au lieu d'un. Les pages ne sont pas complètement inaccessibles dans le site. J'aurais pu ne pas mettre de menu volant que ça n'aurait rien changé - cela permet seulement d'y accéder plus rapidement, c'est tout.

M'enfin je pense pas qu'on arrive à se mettre d'accord sur le sujet