Menu en cours

Bonsoir,


En général quand je code un menu je définis toujours une class "en_cours" (peut importe le nom)
qui possède le même style que le hover. Ainsi dans le CSS, je mets par exemple:

nav ul li a:hover, nav ul li a.en_cours{}

Est-ce une bonne méthode et si oui est-ce la meilleure?

Je fais pareil mais je le met sur le li, je trouve ça plus souple pour styliser le menu (si j'ai besoin de styler le li en plus du a par exemple).

Ah d'accord, et dans ce cas-là c'est li:hover?

Je préfère li a:hover. Vestige du support d'IE6 qui supporte mal :hover sur autre chose qu'un lien.
Modifié par Tony Monast (31 Oct 2011 - 19:35)

idem, "en_cours" toujours sur le "li" (d'ailleurs automatisé via ma class PHP de navigation).

Et pour le :hover, ça dépend du design.

Si tout le bloc est cliquable, je le met sur le <li>, sinon sur le <a> (un changement de visu alors que tu ne peux pas encore cliquer ne serait pas très intuitif).

@Tony_Monast: et oui pensons aux utilisateurs contraints à IE6
@kenor: tu peux réexpliquer sur le changement de visu? j'ai pas tout saisi .

Je crois qu'il veut dire que si l'élément du menu change de look au hover, il faut que cet élément soit cliquable. Par exemple, si le :hover est sur le <li>, faire en sorte que le <a> remplisse tout l'intérieur du <li>, avec un display:block sur <a> par exemple. Mais bon, aussi bien de mettre le :hover sur le <a> dans ce cas pour rester retro-compatible avec IE6.

À part peut-être pour des menus en cascade, je ne vois pas de réel intérêt à mettre le :hover sur le <li>
Modifié par Tony Monast (31 Oct 2011 - 20:15)

jmlapam a écrit :
Ah d'accord, et dans ce cas-là c'est li:hover?

Ça dépend du design.

@Tony_Monast: Ah oui d'accord merci,
Pour des menus de 3 niveaux par exemple, j'ai plutôt intérêt à mettre le hover sur le li donc?

@jb_gfx: oui les situations diffèrent, j'entends bien, mais donc ma pratique est pas trop mauvaise alors.
Modifié par jmlapam (31 Oct 2011 - 20:24)

Tony Monast a clarifié ma pensée

Salut,

Tout pareil, plutôt li a:hover, avec donc un li a.current-item pour la page en cours. Généralement, un passage du lien en affichage de type bloc suffit pour faire tout ce que l'on veut. Bien sûr il y a parfois des exceptions…

A noter qu'il y a aussi parfois des CMS qui permettent de générer automatiquement ton menu avec une fonction maison, plaçant automatiquement la classe pour la page en cours dans l'élément <li>…(*)

jmlapam a écrit :
@jb_gfx: oui les situations diffèrent, j'entends bien, mais donc ma pratique est pas trop mauvaise alors.

Yep



(*)C'est le cas de WordPress par exemple. Dans ce cas soit on s'adapte, soit on passe par une autre fonction, soit (mieux) on crée sa propre requête avec WP_Query Modifié par audrasjb (01 Nov 2011 - 09:12)