Question de priorité : JS ou W3C ?

Bonjour,

dans le cadre d'un problème, un membre de mes forums nous a dévoilé le code qu'il avait créé pour gérer ses menus : le truc plutôt classique avec le sous-menu qui s'affiche lorsqu'on passe la souris sur le lien.

La différence avec habituellement est qu'il n'a ni utilisé javascript ni utilisé le :hover de façon non-gérée par internet explorer. En réalité, il a basé son code sur une méthode proscrie par le W3C : le <ul> (type block) dans un <a> (type inline).

Voici le code en bref :

<a href="#">
     Titre et lien du menu
     <ul>
          <li>Lien 1 du sous-menu</li>
          <li>Lien 2 du sous-menu</li>
          <li>Lien 3 du sous-menu</li>
     </ul>
</a>

a:hover { background: none } /* correction d'un bug IE */
ul { display: none }
a:hover ul { display: block }

Au premier abord, ce code est tout simplement faux et les navigateurs acceptent de toutes manières n'importe quoi mais faut-il pour autant le bannir ? En sachant qu'en unique solution de rechange (compatibles sur tous les navs) nous n'avons que javascript à proposer ... vaut-il donc mieux s'assoir un peu sur le W3C ou utiliser le peu accessible javascript ?

(et inutile de dire qu'il ne faut tout simplement pas faire ce genre d'effet inutile, le problème n'est pas là ).

Merci d'avances de vos avis sur la question.

De toute façon j'ai horreur des menus contrôlables uniquement à la souris : et la navigation clavier dans tout ça, on en fait quoi ?

Juxener a écrit :
(et inutile de dire qu'il ne faut tout simplement pas faire ce genre d'effet inutile, le problème n'est pas là )

QuentinC a écrit :
De toute façon j'ai horreur des menus contrôlables uniquement à la souris : et la navigation clavier dans tout ça, on en fait quoi ?

Ce n'était pas une remarque inutile, je trouve que c'est important de signaler que les menus rollover sont difficiles à utiliser au clavier. L'idéal est de faire un menu contrôllable au clavier et à la souris.

Salut,
pour répondre directement à la question posée :

j'utiliserais javascript qui n'a rien d'un facteur d'inaccessibilité lorsqu'il est correctement utilisé.

L'idée est de faire un menu tout à fait fonctionnel sans JavaScript (c'est le minimum requis) et d'ajouter une surcouche JavaScript réalisant l'effet souhaité, à savoir affichage du sous menu au survol (et aussi gérer l'ouverture avec le clavier comme le souligne fort pertinement Quentin).

Pour récapituler :
1- version HTML pure laissant apparaitre menu et sous menu (avec un code HTML correctement structuré pour éviter toute surprise cf : http://blog.alsacreations.com/2006/02/13/223-valider-pourquoi-faire-concretement )
2- 1ere surcouche via CSS pour mettre en forme toujours en laissant affiché menu et sous menu
3- 2eme surcouche via JS cette fois ci pour masquer les sous menus et gérer le survol et le clavier pour laisser apparaitre les sous menus.

Par ailleurs, il faut veiller à ne pas abuser de ce style de menu qui peuvent vite devenir agaçant, surtout lorsqu'ils sont mal implémentés ou trop présents. (ce genre de truc à tous les coins de la page, c'est pétage de cable assuré !)

En amont, il est bon de vérifier que le menu n'est pas trop surchargé, et donc que l'effet recherché est inutile car en allégeant le contenu du menu, l'effet devient inutile
Modifié par Olivier (18 Feb 2006 - 14:21)

QuentinC a écrit :
De toute façon j'ai horreur des menus contrôlables uniquement à la souris : et la navigation clavier dans tout ça, on en fait quoi ?

a:hover, a:focus { background: none } /* correction d'un bug IE */
ul { display: none }
a:hover ul, a:focus ul { display: block }

Non ?

Oui, sauf que... je crois qu'IE ne supporte pas la pseudo-classe focus

QuentinC a écrit :
Oui, sauf que... je crois qu'IE ne supporte pas la pseudo-classe focus

Ah oui tiens... je devrais passer plus de temps sur IE, je ne m'en étais même pas aperçu.

Salut,

a écrit :
QuentinC a écrit :
Oui, sauf que... je crois qu'IE ne supporte pas la pseudo-classe focus

C'est vrai et c'est pour palier ce défaut que je rajoute a:active qui sous IE présente un comportement quasi identique à :focus.

En plus je pense qu'un élément <a> de ce type ne peut pas réellement recevoir le focus.

ET active n'a pas la même fonction : normalement il s'agit du dernier lien cliqué, sauf erreur.

Salut,

Oui, effectivement, ce n'est pas tout à fait pareil : active applique un style au moment du clic sur le lien alors que focus applique un style sur le dernier lien selectionné. Et comme ça a déjà été dit IE6 ne reconnait pas la propriété focus.
Modifié par Pandore (19 Feb 2006 - 11:14)

Par conséquent, javascript obligatoire

Ok merci de vos réponses .
J'en note la conclusion.

(au passage je suis moi-même plutôt contre ce genre de menu, même uniquement à la souris)

Boaf pas besoin de noter ma conclusion, elle est tout de même assez réductrice.