Mehrere Menüoptionen hervorgehoben

Ich verwende WordPress als CMS für meine Website. Für mein Navigationsmenü verwende ich die eingebaute Navigationsmenüfunktion von WordPress. Sie fügen Kategorien, Seiten usw. hinzu und generieren eine Liste mit bestimmten classn, die Sie stylen können – wie das current-menu-item .

Mein Problem liegt hier:

  • Ich habe mehrere Kategorien in meinem Menü und einige Beiträge müssen mehreren Kategorien zugewiesen werden.

  • Wenn sich ein Beitrag beispielsweise nur in einer Category A , wird Category A im Menü hervorgehoben, wenn Sie sich auf der Seite mit diesem Beitrag befinden.

  • Wenn sich ein Beitrag in Category A und Category B , sind Category A und Category B , wenn Sie sich auf der Seite mit diesem Beitrag befinden.

Wie kann ich nur einen Menüeintrag markieren, obwohl der Beitrag in mehreren Kategorien enthalten ist?

Solutions Collecting From Web of "Mehrere Menüoptionen hervorgehoben"

Diese Frage wurde auch beim Stackoverflow gestellt . Hier ist eine Kopie der Antwort, die ich dort gab:

Vielleicht könnten Sie es mit dem CSS3-Selektor nth-of-type formatieren.

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

Diese Stile würden nur auf das erste Auftreten des .current-menu-items abzielen. Genauso könnten Sie wählen, ob Sie die Sekunde mit nth-of-type(2) und so weiter anvisieren möchten.

Ich weiß, dass diese Frage alt und ohne eine ausgewählte Antwort ist, aber ich möchte die Antwort von Thomas früher ausarbeiten und ausweiten. Der nth-of-type-Selektor wird ziemlich gut unterstützt, aber ältere Versionen von IE <9 unterstützen ihn nicht.

Meine Lösung wäre stattdessen die Verwendung des eher unterstützten First-Child-Selektors.

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

Es kann sich um ein Problem bei der Verknüpfung handeln.

Sie werden von dieser Website unter http://www.wildpop.ca (Wildpop dot.ca) sehen, wenn Sie “SEO” aus dem Menü wählen, werden Sie auf die Seite “Monatliche Pakete” geleitet. Der SEO-Link im Menü hat keine eigene Seite. Es ist eine direkte Verbindung zu einem Abschnitt namens (seo_direct), der auf einer anderen Seite enthalten ist, aber wenn Sie das Menü erneut betrachten, werden beide Menüoptionen als “Aktive Seite” hervorgehoben.

Stellen Sie sicher, dass dies nicht das Problem für Sie ist.