Verschiedene Menüpunkte in der Navigation per CSS ansprechen

Andrea L. fragt:

„Ich quäle mich bereits seit längerem mit einem Problem herum, das vielleicht auch andere interessieren könnte.

Ich habe eine Seite mit WordPress erstellt. Diese Seite hat eine farbige Navigation. Sprich, jeder Menüpunkt (inkl. der submenüpunkte) erhält beim hover eine andere Farbe. Das lässt sich gut im CSS bewerkstelligen, indem jeder Punkt eine eigene class erhält (.menu-item-22 {…} zum Beispiel).

Das Problem liegt nun darin, dass die gewünschte Farbe des Hauptmenüpunktes wieder verschwindet, sobald die Seite (oder Unterseite) aktiv ist und auch, sobald das hover auf das Submenü gelenkt wird.

Da die einzelnen Hauptmenüpunkte unterschiedliche Farben haben, kann die farbliche Hervorhebung nicht mit .current_page_parent etc. gelöst werden, da sich das ja immer auf alle Navigationspunkte bezieht.

Es müsste also gezielt der „parent“ über das „child“ angesprochen werden – nur wie geht das?“

Hallo, Andrea,

Du kannst über CSS mehrere Elemente gleichzeitig formatieren. So kannst Du beispielsweise Links ansprechen, die in derselben Liste, aber in unterschiedlichen Zusammenhängen vorkommen.
Dazu musst Du die Elemente einfach nur hintereinander schreiben, getrennt durch ein Komma.

Das HTML der Menü-Liste ist immer gleich aufgebaut:

<ul>
<li>><a href="#"> Ein Listenpunkt </a></li>
<li><a href="#"> Noch ein Listenpunkt </a></li>
</ul>

Die Unterschiede liegen allein in den CSS-Klassen, die WordPress den <li>-Elementen zuweist.

  1. Die CSS-Klasse „menu-item-22“ bezeichnet ein bestimmtes Element in der Reihe, also z.B. das zweite Element.
  2. Die CSS-Klasse „current-menu item“ bezeichnet das Listenelement, das den gerade aktiven Menüpunkt enthält.
  3. Die CSS-Klasse „current-page-parent“ bezeichnet das Elternelement des gerade aktiven Menüpunkts.

Wenn alle diese Links die Farbe rot bekommen sollen – bzw. ein Linkelement beim Mouseover die Farbe wechseln soll – müssen alle drei parallel angesprochen werden.
Das CSS sähe so aus:

li.menu-item-22 a:hover,
li.current-menu-item a,
li.current-page-parent a {
color:red;
}

Damit solltest Du Dein Problem lösen können.