Tuto Un menu avec commentaires pour un menu déroulant ?

Bonjour à tous,
Je cherche une solution pour créer un menu déroulant en utilisant la méthode présentée dans le tutoriel Un menu avec commentaires (ou encore ce tuto : Afficher / Masquer des éléments sans javascript).

En fait, j'aimerai pouvoir mettre des liens dans les commentaires, formulé autrement je veux faire un menu déroulant sans javascript !

Voici un extrait de mon menu :

<a class="agence" href="..." title="L'agence"><img src="/Agence_C/images/menu/agence_00.gif" height="64" width="58" alt="L'agence" />[#red][b]<span></span>[/b][/#]</a>

Et le CSS correspondant :

a.agence {
	background:url(images/menu/agence.gif) no-repeat;
	display: block;
	width: 58px;
	}

a.agence:hover { background: url(images/menu/agence.gif) no-repeat 0 -64px; }

a.agence span { /* définition de la balise <span> inclue dans <a>*/
	display: none;
	}

a.agence:hover span { /* définition de la balise <span> au survol */
	display: inline;
	background-color:#CC0000;
	position:absolute;
	top: 64px;
	left: 23px;
	width: 264px;
	height: 34px;
	background: none;
	color: FFFFFF;
	}

Donc, au survol, l'élément span apparait sous mon lien. Ça marche tant que le contenu du span est un simple texte ou une image, par contre ça ne marche plus si je met un lien. En effet, celui-ci se voit attribué les styles du "lien parent".
J'ai bien tenté un truc du style

a.agence span a
a.agence:hover span a

en vain...
J'ai vu que le tuto Menu déroulant en CSS était en cours de refonte... Où en est-il ?
Modifié par Isobel (01 Apr 2008 - 14:45)

Merci de ta promptitude !

Florent V. a écrit :
Il y a une raison particulière pour cela (mis à part la volonté de commettre sciemment une erreur, bien entendu cligne )?

Loin de moi cette volonté ! Question sûrement naïve : En quoi est-ce une erreur ?
Pour quelle raison ? Trois raisons en fait...
La première est, disons, purement d'ordre moral. Je n'aime pas beaucoup le principe du langage qui s'exécute côté client. Je trouve en particulier qu'il y a des abus dans l'utilisation du Javascript, abus qui porte atteinte à ma liberté, par exemple, je ne supporte pas qu'on m'impose une taille de fenêtre du navigateur, qu'on me supprime les barre d'outils du navigateur, etc.
La seconde, il y a, il me semble, encore beaucoup d'internautes qui désactivent Javascript... (cela m'arrive lorsque le code impose des contraintes comme celles déjà évoquées)
Et enfin, la dernière, conséquence de mon goût pour le Javascript. Je ne maîtrise pas le Javascript !
De plus, le peu que je connais de Javascript est essentiellement du "gadget" dont on peut se passer et il faut à chaque fois prévoir le cas où l'internaute l'a désactivé (d'où double travail !).

Ceci dit, je reste ouvert à une solution avec Javascript, je ne suis pas un extrémiste anti-Javascript ! Simplement, tant que je peux m'en passer... je m'en passe !

Après quelques recherches sur le oueb, que penser de ces "solutions" ?
Sur tuto-fr.com
et
sur peutetreunereponse.net

Merci de ton aide.
Modifié par Isobel (01 Apr 2008 - 17:22)

Isobel a écrit :
Je trouve en particulier qu'il y a des abus dans l'utilisation du Javascript, abus qui porte atteinte à ma liberté, par exemple, je ne supporte pas qu'on m'impose une taille de fenêtre du navigateur, qu'on me supprime les barre d'outils du navigateur, etc.

Oui, mais cela n'a strictement rien à voir avec le code Javascript que toi tu sers aux visiteurs, donc il n'y a pas de question morale ici.

Le seul rapport éventuel de ces mauvaises pratiques avec les choix que tu peux faire est le fait que cela pousse certains administrateurs système et certains utilisateurs à désactiver Javascript, ce qui nous amène à notre deuxième point: le javascript non-intrusif. En gros, selon ce principe Javascript doit être utilisé comme une amélioration en surcouche, un peu comme... CSS, tiens.

Appliqué à un menu déroulant, cela donne: si Javascript n'est pas activé, alors mon menu déroulant est affiché avec tous les sous-menus déroulés, et donc tous les liens du menu accessibles (à moins qu'il ne soit possible et de préférence facile de naviguer en passant par les titres de rubrique uniquement).

Isobel a écrit :
La seconde, il y a, il me semble, encore beaucoup d'internautes qui désactivent Javascript...

Cela dépend de ce que l'on appelle «beaucoup». Les estimations sont très vagues (on donne entre 10% et 3% des internautes...), mais mon avis est que cela représente une part:
- suffisamment importante pour qu'il soit impératif de prendre en compte l'accessibilité sans Javascript (en appliquant les concepts de javascript non intrusif, de dégradation gracieuse et d'amélioration progressive);
- suffisamment basse pour que les améliorations utilisant Javascript soient des investissements intéressants (si les améliorations en question sont pertinentes, bien sûr).

Isobel a écrit :
Et enfin, la dernière, conséquence de mon goût pour le Javascript. Je ne maîtrise pas le Javascript !

C'est souvent le fond du problème dans les questions du type «comment faire ça sans Javascript?».

Isobel a écrit :
De plus, le peu que je connais de Javascript est essentiellement du "gadget" dont on peut se passer

Toi, tu as loupé les cours d'ergonomie à l'école.

Isobel a écrit :
Après quelques recherches sur le oueb, que penser des ces "solutions" ?
Sur tuto-fr.com

Cette première solution utilise Javascript pour Internet Explorer (cf. le contenu du fichier csshover.htc qui est inclus via la propriété non standard behaviour). C'est donc l'équivalent d'un menu reposant sur la pseudo-classe CSS :hover et compensant l'absence d'implémentation de :hover sur les éléments autres que a dans IE6 via un script JS réservé à IE. On peut faire la même chose de manière un peu plus propre en utilisant à la fois les pseudo-classes :hover et :focus (pour la navigation au clavier), et un script JS adressé à IE 6 uniquement via un commentaire conditionnel qui va bien, et prenant en compte les évènements onmouseover et onfocus.
Ça sera mieux, mais on gardera des problèmes d'accessibilité importants:
- utilisation de display: none dans la feuille de styles (la plupart des lecteurs d'écran ne liront pas les sous-menus);
- navigation au clavier pas forcément robuste (à tester mais j'ai des doutes...).

Pour information, le modèle de menu déroulant que je citais plus haut («Son of Suckerfish Dropdowns») évite ce premier écueil mais n'est pas du tout utilisable au clavier, ce qui est un minimum pour un menu déroulant à peu près accessible.

J'ai fait un tour dans mes marque-pages pour en retrouver un à peu près accessible, et le seul que j'ai trouvé est celui d'Aurélien Levy: La recette pour un menu déroulant accessible - partie 1. Mais je n'ai jamais eu le courage de le mettre en place (il faudra que je tente un de ces quatre...).

Isobel a écrit :
et sur peutetreunereponse.net

À demi-mots, l'auteur présente ça comme une énorme bidouille. Il aurait pu le dire avec des mots complets... et ne pas publier cet article à l'intérêt très limité. À oublier.
Modifié par Florent V. (01 Apr 2008 - 17:51)

Encore une fois, merci !

Florent V. a écrit :
C'est souvent le fond du problème dans les questions du type «comment faire ça sans Javascript?».
Toi, tu as loupé les cours d'ergonomie à l'école.

Hé hé ! J'ai eu une formation en Javascript très très courte et une formatrice catastrophiquement incompétente... Ce qui explique ma réticence à l'utiliser !

Bon, je vais regarder ce dernier lien de plus près.

Sinon, concernant ma première idée, en quoi est-ce une erreur ?
Voilà un site, où j'utilise la méthode du menu avec commentaires : www.lesloisdelagravite.com
Il n'y a vraiment pas moyen de mettre des liens à la place des commentaires ? (j'suis un peu têtu )

Florent V. a écrit :
De plus, quand tu survoles un lien dans un lien, lequel des deux est censé être actif?

Ah ben oui ! J'avais pas pensé à ça, benêt que je suis!
Je vais abandonner l'idée du menu déroulant et revenir à des menus secondaires qui s'affichent une fois les rubriques ouvertes.

Florent V. a écrit :
Attention, tu as un petit problème ergonomique avec ce menu (ça tient au positionnement du texte qui s'affiche au survol).

Damned ! Quel est le problème ? Sur quel navigateur ?
Modifié par Isobel (01 Apr 2008 - 19:27)