web-dev-qa-db-fra.com

Plusieurs éléments de menu mis en évidence

J'utilise WordPress comme CMS pour mon site web. Pour mon menu de navigation, j'utilise la fonction de menu de navigation intégrée de WordPress. Vous ajoutez à cela des catégories, une page, etc., qui génèrent une liste avec certaines classes que vous pouvez styler - comme current-menu-item.

Mon problème réside ici:

  • J'ai plusieurs catégories dans mon menu, et certains articles doivent être attribués à plusieurs catégories.

  • Si une publication était par exemple dans un Category A uniquement, lorsque vous êtes sur la page avec cette publication, Category A serait mis en surbrillance dans le menu.

  • Si une publication est dans Category A et Category B, lorsque vous êtes sur la page avec cette publication, Category A et Category B seront tous deux mis en surbrillance.

Comment puis-je mettre en surbrillance un seul élément de menu, même si l'article est dans plusieurs catégories?

categoriesmenusnavigationcustomization
1
Angus

Cette question a également été posée sur stackoverflow . Voici une copie de la réponse que j'ai donnée là-bas:

Peut-être pourriez-vous l'appeler à l'aide du sélecteur nth-of-type CSS3.

.current-menu-item:nth-of-type(1) {
    background:#ffff00;
    /* Highlight styles */
}

Ces styles ne cibleraient que la première occurrence de l'élément .current-menu. De même, vous pouvez choisir de cibler le second avec nth-of-type(2), et cetera.

2
Just Thomas Misund

Je sais que cette question est ancienne et sans réponse choisie, mais je voudrais développer et approfondir la réponse de Thomas plus tôt. Le sélecteur de type de type est assez bien supporté, mais les anciennes versions de IE <9 ne le prennent pas en charge.

Ma solution serait d'utiliser le sélecteur de premier enfant le plus largement pris en charge.

.current-menu-item:first-child {
    background:#ffff00;
    /* Highlight styles */
}
2
Dwayne Charrington

Il peut s'agir d'un problème de hyperlien.

Vous verrez sur ce site à http://www.wildpop.ca (Wildpop dot.ca), lorsque vous choisissez "SEO" dans le menu, vous êtes dirigé vers ce qui semble être la page "Packages mensuels". Le lien SEO dans le menu n'a pas sa propre page. Il s'agit d'un lien direct vers une section nommée (seo_direct) qui est contenue dans une page différente, mais lorsque vous consultez à nouveau le menu, les deux options du menu sont mises en surbrillance comme "Page active".

Assurez-vous que ce n'est pas le problème pour vous.

0
dave wild