Menü (Widget) zum Aufklappen

Hinweis:
Die Anregung zu diesem Beitrag wurde dem “WordPress-Bistro” entnommen. Der CSS-Code stammt von Florian Hartig (siehe Kommentar vom 17.06.2014)


In WordPress lassen sich individuelle (benutzerdefinierte) Menüs einfach gestalten und als Widget in eine Sidebar einfügen.

 

Auf Design -> Menüs klicken:

 

Hier wurde ein Beispiel-Menü mit einigen Unterseiten erstellt:

 

Zum Einfügen des fertigen Menüs in die Sidebar (Seitenleiste) auf Design -> Widgets klicken…

 

…und das Widget an die gewünschte Position ziehen:

 

Im Frontend werden nun alle Seiten (allerdings auch mit allen Unterseiten) aufgelistet. Sind mehrere Hauptseiten mit vielen Unterseiten vorhanden, wird die Liste sehr lang und damit unübersichtlich:

 

Wir fügen den CSS-Code im Customizer ein (Erläuterungen zum Code am Ende der Seite):

/* Widget-Navigation klappbar machen */
#menu-nav1-1 .sub-menu { display: none; }
#menu-nav1-1 .current_page_item,
#menu-nav1-1 .current_page_item > .sub-menu,
#menu-nav1-1 .current_page_ancestor,
#menu-nav1-1 .current_page_ancestor > .sub-menu,
#menu-nav1-1 .current_page_ancestor > li { display: block; }

Hier ist der eingefügte CSS-Code zu sehen:

 

Zunächst sind nur die Seiten der ersten Ebene zu sehen. Ein Klick auf “Bilder”…

 

…zeigt die vorhandenen Unterseiten an:

 

Mit weiteren Klicks auf die betreffenden Unterseiten werden die darunter befindlichen Seiten aufgeklappt:

 

Hinweise zum verwendeten CSS-Code:
Die Code-Zeilen beziehen sich auf die ID des ersten ul-Elements im Widget (Im Beispiel: #menu-nav1-1) und müssen je nach Theme geändert werden. Hier wurde als Muster das Theme “Responsive” benutzt.