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.
