Menu déroulant [Résolu]

Bonjour,

Je souhaiterais savoir si il est possible de faire des menus déroulant avec du CSS qui soient compatibles avec IE.

Merci
Modifié par mathmax (19 Aug 2005 - 04:32)

tu as des exemples ici

Les 6 exemples de menus déroulants qui suivent le lien de siddhartha sont en javascript et non en css. Dans cette suite d'exemples, le javascript est utilisé pour suppléer à la pseudo classe "hover" qui n'est pas bien comprise partout.

Bonjour mathmax,

Pourrais-tu, s'il-te-plaît :
- donner un titre plus explicite à ton sujet ?
- préciser si nécessaire ta question, à moins que la réponse ne figure déjà dans la FAQ du forum ou dans les tutoriels (auquel cas, le sujet peut être marqué comme [ resolu ] ) ?
Modifié par Laurent Denis (07 Aug 2005 - 15:30)

En fait, je sais que c'est possible de faire les menus déroulant en Javascript. Mais je me pose les question suivantes:

- Es-ce que le Javascript est compréensible par la pluspart des utilisateurs? (Autant que CSS)

- Est-il vraiment impossible de faire des menus déroulants avec du CSS (tout en restant compatible avec IE). Je pensais notament imbriquer des liens les uns dans les autres puisque la pseudo-classe :hover ne s'applique qu'au lien.

- Peut- on aussi faire de tels menus en flash. Si oui, quels sont les avantages ou inconvénients par rapport au Javascript?

mathmax a écrit :

- Es-ce que le Javascript est compréensible par la pluspart des utilisateurs? (Autant que CSS)

Non, et il est impossible de déterminer la proportion des utilisateurs chez qui javascript :
- ne sera jamais disponible car ils utilisent un navigateur qui ne l'implémente pas (navigateur texte, par exemple)
- ne sera pas activé pour une raison ou pour une autre (poste client dans un réseau avec administrateur l'ayant désactivé pour raisons de sécurité, parano épisodique sur les virus et le phishing, agacement récurrent face à ses mauvais usages, etc.)

Tout ce que l'on sait, c'est qu'une solution reposant uniquement sur javascript sera obstructive, et fera perdre une part d'audience variable selon le temps.

mathmax a écrit :

- Est-il vraiment impossible de faire des menus déroulants avec du CSS (tout en restant compatible avec IE). Je pensais notament imbriquer des liens les uns dans les autres puisque la pseudo-classe :hover ne s'applique qu'au lien.

Petite précision : c'est dans l'implémentation CSS déffectueuse d'IE que cette pseudo classe ne s'applique qu'aux liens. Pas dans la norme, ni dans les navigateurs plus récents qu'IE.

cela dit, ta solution est impossible, car l'imbrication des liens est impossible.

Il est possible de faire des menus déroulants uniquement CSS à condition de limiter la déco et s'en tenir à des effets minimaux.

mathmax a écrit :

- Peut- on aussi faire de tels menus en flash. Si oui, quels sont les avantages ou inconvénients par rapport au Javascript?

Avantages : c'est joli, rigolo et plutôt très facile.

Inconvénient majeur : il est encore plus difficile de limiter les dégats côté interopérabilité (ça marche chez encore moins de gens) et côté accessibilité qu'avec javascript.

Mais le fond du problème n'est pas dans toutes ces questions. Il est plutôt dans :Ai-je besoin du menu déroulant, quelque-soit la technique ? Ou est-ce que je ne cherche pas plutôt à éviter de remettre en cause un contenu de menu défectueux et un interface dont il faut repenser les bases en terme d'ergonomie ?

Autrement-dit, avant de mettre un pansement sur la plaie, pourquoi ne pas traiter la plaie elle-même, et si demander s'il est bien utile (pour l'utilisateur) d'avoir autant de foutoir dans un menu de navigation ?
Modifié par Laurent Denis (09 Aug 2005 - 10:25)

a écrit :
cela dit, ta solution est impossible, car l'imbrication des liens est impossible.

Pourquoi cela est-il impossible? J'ai écris:
<ul id="menu2">
<li>
<a id="p2" href="#">Partie 1
<ul id="smenu2">
<li><a href="#">lien1</a></li>
<li><a href="#">lien2</a></li>
</ul>
</a>
</li>
</ul>

puis dans le CSS:

#menu2 #smenu2 {display: none}

#menu2 #p2:hover #smenu2 { display: block}

ça marche cependant seleument sur Mozilla...

mathmax a écrit :
cela dit, ta solution est impossible, car l'imbrication des liens est impossible.

Pourquoi cela est-il impossible? J'ai écris:
...
<a id="p2" href="#">Partie 1
<ul id="smenu2">
<a>...</a>
</ul>
</a>
...


Ah... Mozilla est gentil, sur ce coup-là, en apparence : il mobilise tous ses processus de récupération d'erreur HTML, comme devant toute bonne soupe de balises à l'ancienne et aux règles imprévisibles, pour parvenir à en faire quelque-chose d'intelligible. Et c'est loupé, car, le plus souvent, tous tes liens atteindront l'url indiquée pour le lien conteneur

Règle 0, règle prioritaire, règle fondamentale et existentielle de tout développeur en (X)HTML : vérifier la validité de son code avant tout autre chose.

Un élément <a> ne peut pas, selon HTML4.01, XHTML1.0 et consors, contenir un élément bloc <ul>, ni un autre élément <a>. ce que le validateur HTML te signalerait immédiatement si tu prenait la peine de lui soumettre ta page.

Qu'est-ce que cela change ?

- comme dit ci-dessus, les navigateurs ne peuvent plus se fier aux règles qu'ils ont acceptées et implémentées. Chacun doit se débrouiller comme il peut pour arriver à deviner le résultat qu tu attendais. Avec plus ou moins de bonheur selon les navigateurs : il est évident, en effet, que cela marchera avec certains, et pas avec d'autres. C'est une loterie, à ce niveau d'invalidité. Et le résultat est amusant dans certains navigateurs, pour ce qui est de l'url atteinte par chaque lien.

- ton code sera encore plus inutilisable pour des "machines" plus exigeantes, tels que les scripts et les moteurs qui font tourner les outils d'accessibilité comme les lecteurs d'écran, mais aussi ceux qui émergent comme la syndication de contenu, etc.

- comme le dit le validateur CSS : validate your HTML first ! Car le rendu CSS est bâti par le navigateur sur l'arbre du document, lui-même issu de la structure HTML. Autrement dit, une structure HTML invalide = un arbre alléatoire selon les navigateurs = une base de travail alléatoire pour le moteur CSS du navigateur = un rendu totalement pifométrique

Alors, oui, Mozilla a été gentil là-dessus. En creusant un peu, on arriverait à faire en sorte qu'IE, Safari, Opera soient tout aussi gentils, car ils intègrent tous des procédés de gestion d'erreur. Mais il restera toujours un autre navigateur sous lequel ça ne marchera pas, et qui peut très bien être la prochaine version de Mozilla, ou d'IE : ces processus de gestion d'erreur n'obéissent à aucun standard, et peuvent donc changer du jour au lendemain dans chaque navigateur. Cela s'appelle bâtir sur du sable, non ?
Modifié par Laurent Denis (09 Aug 2005 - 16:58)

mathmax : pourrais-tu afficher ton code correctement, comme cela est demandé dans les Règles du forum ?
Et je crois également qu'un modérateur t'a demandé de trouver un titre plus évocateur. Je suis de son avis.

Merci d'avance pour tes modifications.

Merci, je crois que je vais utiliser du Javascript pour le moment. Merci siddhartha pour ton lien qui me donne directement le code.