Support » Allgemeine Fragen » Hauptmenü in zwei horizontale Ebenen aufteilen

  • Hallo,
    ich hoffe, jemand hat einen Tipp für mich.
    Ich möchte gerne mein Hauptmenü in zwei horizontale Ebenen aufteilen.
    Auf der Startseite wird nur die oberste ebene angezeigt, dort mit z.B. vier Menüpunkten.
    Klicke ich auf einen der Menüpunkte, soll sich unterhalb der ersten eben eine weitere Ebene auftun und dort weitere Menüpunkte anzeigen. Klicke ich auf die dort vorhandenen Menüpunkte, soll das Untermenü weiterhin angezeigt werden.

    Beispiel:

    -> Startseite:
    | Menüpunkt1 | Menüpunkt2 | Menüpunkt3 | Menüpunkt4 |

    -> Menüpunkt1 wurde geklickt:
    | Menüpunkt1 | Menüpunkt2 | Menüpunkt3 | Menüpunkt4 |
    | Menüpunkt1a | Menüpunkt1b | Menüpunkt1c | Menüpunkt1d | Menüpunkt1e |

    Mir ist vollkommen klar, wie ich ein Menü in WP erstelle, mir ist auch bewusst das man mit einem individuellen Menü mithilfe der Widgets und bestimmten Plugins dieses nur auf bestimmten Seiten Anzeigen lassen kann. Was von der Logoik her genau das ist was ich suche, nur die möglichen Position des „Untermenüs“ mithilfe von Widgets ist meistens leider nicht direkt unterhalb des Hauptmenüs, schon gar nicht horizontal.

    Gibt es da möglicherweise ein passendes Menü-Plugin? Ich habe es bereits mit Megamenü Plugins versucht, doch habe ich auch dort nichts gefunden.
    Wie kann man das lösen?

Ansicht von 3 Antworten - 1 bis 3 (von insgesamt 3)
  • Das lässt sich über eine Anpassung des Stylesheets umsetzen. WordPress fügt dem Menü erfreulicherweise dazu passende Klassennamen hinzu:

    Seiten, die wiederum Unterseiten haben, bekommen eine Klasse page-item-has-children. Die Unterseiten lassen sich dann mit .page-item-has-children .children { display:none; } ausblenden.

    Den Hover-Effekt (Links zu Unterseiten werden beim Überfahren dargestellt) bekomme ich mit .page-item-has-children:hover .children { display: block; } hin.

    Öffne ich nun eine Unterseite, erhält der Link der Elternseite von WordPress eine neue Klasse .current-page-parent zugewiesen. Alle Unterseiten werden mit .page-item-has-children.current-page-parent .children { display: block; } sichtbar. Die Unterseite selber erhält eine CSS-Klasse .current-page-item zugewiesen, die ich auch wieder entsprechend gestalten kann usw.

    Hier findest du einen Artikel, der eine beispielhafte Lösung beschreibt:
    http://www.netz-gaenger.de/blog/wordpress-tutorials/horizontales-untermenue-wordpress-erstellen/

    Gruß, Torsten

    Thread-Ersteller Martin

    (@martin77)

    Hallo, danke für die guten Tipps!
    Gruß,

Ansicht von 3 Antworten - 1 bis 3 (von insgesamt 3)
  • Das Thema „Hauptmenü in zwei horizontale Ebenen aufteilen“ ist für neue Antworten geschlossen.