Menübutton

WordPress – Unterseiten in der Navigation ein- und ausblenden

| 10.05.2015 | Webtechnologien | 4 Kommentare

Navigation Submenü ausblenden

Wie die Unterseiten in der Navigation ein- und ausgeblendet werden können, werde ich heute in diesem Artikel beschreiben. Das hatte ich bereits im vorherigen Artikel angekündigt. Nun werden in WordPress mit der Funktion wp_list_pages die gesamten Seiten in einer Liste ausgegeben und wenn WordPress als Content Management System eingesetzt wird, kann die Anzahl der Seiten eine ziemlich lange Liste ergeben. Damit nur die jeweiligen Links für die Unterseiten der aktuell angezeigten Seite zusehen sind, müssen die Links der Unterseiten von den Seiten der gleichen Ebene mithilfe von CSS ausgeblendet werden. WordPress vergibt für jeden Listenpunkt die Klasse .page_item und die aktuelle Seite erhält zusätzlich die Klasse .current_page_item. Eine Seite, die Unterseiten enthält, bekommt die Klasse .page_item_has_children zugewiesen. Ist die aktuelle Seite eine Unterseite, erhält die nächsthöhere Seite die Klasse .current_page_parent als auch die Klasse .current_page_ancestor, die Seite noch eine Ebene darüber erhält lediglich die Klasse .current_page_ancestor. Die Unterseiten einer Seite sind in einer Liste mit der Klasse .children enthalten.
Zunächst werden erstmal alle Listenpunkte der Unterseiten ausgeblendet in dem die Klasse .children via CSS für die Eigenschaft »display« den Wert »none« erhält. Damit nun die Unterseiten der aktuellen Seite sichtbar werden, muss der Klasse .children innerhalb der Klasse .current_page_item für die Eigenschaft »display« der Wert »block« zugewiesen werden.

#sidebar .children {
display: none;
}

#sidebar .current_page_item .children {
display: block;
}

Das Ein- und Ausblenden der Listenpunkte klappt soweit erstmal. Wird jedoch eine Unterseite ausgewählt, verschwinden die anderen Unterseiten der jeweiligen Hauptseite. Damit diese weiterhin sichtbar bleiben, wird an die Klasse .children innerhalb der Klasse .current_page_ancestor ebenfalls die Eigenschaft »display« mit dem Wert »block« vergeben.

#sidebar .current_page_ancestor .children {
display: block;
}

Für zwei Ebenen in der Navigation würde das so schon funktionieren. Kommt eine weitere Ebene hinzu, welche in der ersten Ebene nicht angezeigt werden soll, müssen weitere Deklarationen festgelegt werden. Mit folgender Anweisung werden die Listenpunkte der Ebene 3 ausgeblendet, sofern eine Hauptseite ausgewählt ist.

#sidebar .current_page_item .page_item_has_children .children {
display: none;
}

Für den Fall, dass eine Seite der Ebene 2 ausgewählt ist, müssen mit der nächsten Deklaration die Listenpunkte der Ebene 3, die zu den benachbarten Seiten der Ebene 2 gehören, ebenfalls ausgeblendet werden.

#sidebar .current_page_ancestor .page_item_has_children .children {
display: none;
}

Damit die Listenpunkte der Ebene 3, welche zu der ausgewählten Seite der zweiten Ebene gehören, angezeigt werden, wird folgende Anweisung geschrieben:

#sidebar .current_page_ancestor .current_page_item .children {
display: block;
}

Um den gesamten Zweig des Menübaums in der dritten Ebene sichtbar zu machen, wird noch eine weitere Anweisung benötigt:

#sidebar .current_page_ancestor .current_page_ancestor .children {
display: block;
}

Für eine Navigation von drei Ebenen würde diese Lösung funktionieren. Kommen noch Ebenen hinzu, müssten weitere Deklarationen folgen. Es ist also noch nicht die perfekte Methode, da die Ebenen nicht beliebig erweiterbar sind. Sollte ich das noch irgendwie besser hinkriegen, werde ich das Ergebnis als Kommentar posten. Vielleicht könnte es mit der .current_page_parent Klasse für endlose Erweiterungen funktionieren. Ich werde noch ein wenig probieren.

Aktiven Link in der Navigation hervorheben

Damit die Leute auf der Website auch besser sehen, wo sie sich gerade befinden, kann der aktive Link, welcher die Klasse .current_page_item besitzt, entsprechend hervorgehoben werden. In diesem Beispiel wird der zuvor mit der Schriftfarbe Rot deklarierte Link, sofern er aktiv ist, mit der Schriftfarbe Grün versehen. Damit die Unterseiten nicht auch alle die grüne Schriftfarbe erhalten, wird denen die eigentliche Formatierung zugewiesen.

a {
color: red;
}

#sidebar .current_page_item a{
color: green;
}

#sidebar .current_page_item .children a{
color: red;
}

Sollte jemand eine bessere Lösung für die Navigation haben, dann bitte in den Kommentaren posten. Vielen Dank.

Tags:

Beitrag kommentieren

Alle Kommentare
  • Oliver

    08.11.2016, 10:27 Uhr

    Wenn ich das bei meinem Portal versuche und als separates CSS einfüge, geschieht rein gar nichts.

    Liegt das daran, dass meine Unterseiten mit „depth “ definiert sind?

  • zeckbert

    13.12.2016, 20:23 Uhr

    Hallo Oliver,
    ich habe die Liste der Seiten von der im Beitrag beschriebenen Navigation mit der Funktion wp_list_pages() in die Sidebar integriert und lediglich die Parameter child_of und title_li definiert. Wie das ist, wenn zusätzlich die Hierarchiestufen mit dem Parameter depth dazu kommen, weiß ich nicht, ob sich dann vielleicht die generierten Klassen ändern. Sind denn die gleichen Klassen im HTML zu finden, wie oben im Beitrag beschrieben?

  • Rolf

    22.05.2017, 12:53 Uhr

    Hallo,
    gibt es hierfür auch eine generelle Lösung, die z.B. via Plugin zentral steuern kann, dass generell Unterseiten der ausgewählten Seite in der Sidebar an oberster Stelle angezeigt werden? Oder aber auf einigen Seiten auch nicht? Danke!