Davadel a écrit :
En faites, ce n'est pas vraiment un tuto que je cherches mais bien une méthodologie.
Alors un début de méthodologie:
1. Apprendre à se servir des pseudo-classes :hover et :focus en CSS. Les utiliser dans des pages de test. Essayer de faire varier la mise en forme d'un lien au survol. Essayer de faire varier la mise en forme d'un lien au focus. Essayer d'obtenir un comportement similaire aussi bien au survol qu'au focus. Et tester avec un navigateur, en utilisant aussi bien la souris (phase 1) que le clavier exclusivement (phase 2). Rappel: avec la majorité des navigateurs, la touche utilisée pour la navigation au clavier est Tab (Shift+Tab pour revenir en arrière).
2. Apprendre le positionnement CSS. Nombreuses ressources disponibles sur Alsacréations.
3. Pour la structure HTML d'un menu déroulant, on va en général utiliser des listes imbriquées: une liste UL avec un LI pour chaque rubrique, et dans chaque LI un intitulé dans un lien (A) et les liens de la rubrique dans une nouvelle liste UL.
4. Vérifier que l'on est capable d'attribuer des styles uniquement aux LI de premier niveau, aux A dans ces LI, aux UL et LI de second niveau, etc. Réviser les sélecteurs CSS si ce n'est pas le cas.
5. Placer les différents LI de premier niveau côte-à-côte (pour un menu déroulant horizontal). Laisser les UL affichés en dessous des intitulés de rubrique.
6. Masquer les UL de deuxième niveau. Au survol des LI de premier niveau, les afficher à nouveau. On peut jouer, en CSS, sur la propriété CSS
display, et sur la pseudo-classe
:hover.
7. Pour que la hauteur des UL de second niveau ne soit pas prise en compte quand ils s'affichent, on devra les positionner en absolu. Si le positionnement CSS est un minimum connu, ça ne devrait pas poser problème. On voudra sans doute positionner ces sous-menus par rapport à leur parent (LI de premier niveau) plutôt que par rapport à la page.
8. Ne pas oublier qu'on n'a réalisé via les étapes 1-7 qu'un prototype, à ne pas utiliser en production.
Davadel a écrit :
A ce propos, quand IE6 aura disparu, est ce que le full css sera de rigueur?
Non. Le problème de compatibilité IE6 aura disparu. Pas le problème de compatibilité avec les navigateurs mobiles (comment tu survoles un élément avec des boutons ou une interface tactile, hum?). Et pas non plus les problèmes d'accessibilité et d'ergonomie déjà signalés.
Le survol (qu'on le gère en CSS avec la pseudo-classe :hover ou en JavaScript) n'est tout simplement pas un bon moyen de garantir un accès à l'information. Il faut toujours, au minimum, le doubler d'un mécanisme au focus; et autant que possible favoriser le clic plutôt que le survol et le focus.
.
)