Pour le menu déroulant, on en parle justement dans
ce sujet.
Le principe est le suivant:
- On se limite à deux niveaux: titre de rubrique et liens des pages de la rubrique. Si tu as besoin de niveaux supplémentaires, c'est que ton site est mal organisé, et c'est ça qu'il faut corriger; ne surtout pas faire de menu déroulant à trois ou quatre niveaux, c'est une plaie à développer ET à utiliser.
- On part d'une structure HTML avec des listes non ordonnées (UL) imbriquées. Chaque rubrique du site est un LI qui contient un élément A (lien vers une page d'index de rubrique ou la première page de la rubrique) suivi d'un élément UL (le sous-menu). Il y en a un bon exemple dans le sujet indiqué ci-dessus.
- On s'occupe de la mise en forme et du positionnement des différents éléments du sous-menu.
- On peut rendre le menu déroulant fonctionnel en utilisant uniquement CSS et la pseudo-clase
:hover (voir sujet indiqué ci-dessus, et plusieurs ressources en ligne). Par contre, ça ne permettra pas d'afficher les sous-menus si l'utilisateur n'utilise pas la souris ou le touchpad d'un ordinateur portable (exemples possibles: utilisateur qui ne peut pas utiliser la souris car il n'a pas un contrôle assez précis de ses gestes; navigation sur un smartphone...).
- On peut remédier à ce problème, du moins en partie, en utilisant JavaScript (et donc c'est parti pour apprentissage des bases de JavaScript, éventuellement une introduction à un framework tel que jQuery, puis mise en place ou développement d'un script qui va bien). Mais qu'on le fasse ou pas, l'essentiel sera déjà de s'assurer que les liens de premier niveau (intitulés des rubriques) sont cliquables, et mènent à des pages qui permettent d'accéder à tous les contenus de la rubrique. Bref, le sous-menu du menu déroulant doit être un raccourci, mais pas le passage obligé pour accéder aux contenus.
blum95 a écrit :
un lien favori à me conseillez?
Pas vraiment, j'utilise peu cette technique. De mémoire on trouve plein d'infos un peu vieillotes, donc je te conseille de lire plusieurs ressources sur le sujet et d'essayer de repérer celle qui correspond le plus aux «bonnes pratiques» modernes. Notamment en ce qui concerne les éléments AREA, si l'article que tu trouves ne parle pas de renseigner correctement l'attribut
alt correspondant... il y a un problème.
Il y a bien la spécification HTML4 qui peut servir de référence, mais les exemples donnés utilisent OBJECT plutôt que IMG, et A plutôt que AREA pour définir les zones cliquables (sauf un exemple), et je suis pas sûr que ces techniques soient bien compris par les navigateurs. Voici le lien malgré tout (traduction française):
http://www.la-grange.net/w3c/html4.01/struct/objects.html#edef-AREA
Passer du WYSIWYG à la spécification HTML 4, c'est un peu rude, désolé.
Un avertissement pour finir: combiner une image map et un menu déroulant, si c'est ton intention, ben ça va pas être possible.
)