Wie kann ich so ein Menü umsetzen?

  • Hallo zusammen,

    ich brauche ein Menü für meine Homepage.

    Das ganze besteht aus 3 Ebenen. Die Erste Ebene ist die Top-Navigation und muss immer angezeigt werden. Wenn ein Benutzer nun auf einen Menüpunkt dieser Kategorie klickt, soll eine zweite Ebene an einer anderen Stelle der Seite angezeigt werden.

    Aus diese Zweite Ebene kann der Benutzer nun ein Menü-Element auswählen und, falls es dazu Untermenüpunkte existieren, sollen diese ebenfalls an einer anderen Stelle der Seite angezeigt werden.

    Dieses 3. Menü kann auch angeklickt werden und es muss aber dieser Menüpunkt optisch hervorgehoben werden. UND es muss das Menü 2, was durch das anklicken des Top-Navs ausgewählt wurde, auch weiterhin bleiben. Er muss sich also diese Ebene merken.

    Ich habe versucht das mal schematisch dazustellen. Hoffe es hilft.

    Kann man, und wenn ja wie, solch eine Menüstruktur mit Wordpress umsetzen?


    [Blockierte Grafik: http://img257.imageshack.us/img257/1199/wpmenu.th.jpg]

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

  • wow, Riesenbild!

    Ja, über die Custom-Menü-Funktion von WP müsste sich so etwas realisieren lassen. Es ist aber nicht ganz so trivial einfach... Du brauchst auf jeden Fall einen ordentlichen Plan von HTML und CSS um das zu realisieren und musst mit einem HTML-Editor das Template bearbeiten an der richtigen Stelle bearbeiten was wiederum voraussetzt, dass Du weisst wie Templates für WordPress funktionieren. Sonst lass die Finger davon oder heuer ein Entwickler an.

    Schnell erklärt funktioniert das in etwa so:
    Die einzelnen Menübereiche musst Du entsprechend in DIV-Container packen und denen eine eindeutige ID wie firstlevel, secondlevel und thirtdlevel geben, damit Du per CSS die Bereiche ansprechen kannst.
    Wenn Dein Theme dann Custum-Menü fähig ist (wenn es im Backend unter Design die Abteilung Menü gibt, dann ist dies der Fall), dann kannst Du Dir dort die Menüstruktur entsprechend zusammen stellen.

    Im HTML-Quelltext musst Du die entsprechenden Menüeinträge anhand ihrer Tiefe im Menü mit der Funktion

    PHP
    <?php wp_nav_menu(); ?>

    in den entsprechenden DIV-Containern platzieren. Dazu musst Du auf die Funktionsreferenz im WordPress Codex zurück greifen und die Funktion für jeden der einzelnen Bereiche so anpassen, dass dort nur der entsprechende Teil des Menüs in dem jeweiligen Bereich erscheint.

    Auch eine Schachtelung der statischen Seiten in WordPress selbst und ein Zugreifen über die Funktion

    PHP
    <?php wp_list_pages(); ?>

    auf die Unterseiten entsprechend ihrer geschachtelten Tiefe wäre evtl. denkbar.

    Beide Funktionen bieten die Möglichkeit diverse HTML-Tags um den jeweiligen Menüeintrag zu wrappen. Wie z. B. UL, LI, oder was auch immer. Mit dem entsprechenden CSS-Markup kannst Du Dir dann jedes x-beliebige Menü damit basteln.

    Wenn Dir das alles zu kompliziert klingt, dann sehe eher von der Lösung ab, weil es wie gesagt schon etwas aufwendiger ist.

    Check mal:
    http://justintadlock.com/archives/2010/…hes-hello-menus
    http://thinkvitamin.com/code/getting-s…s-custom-menus/
    http://codex.wordpress.org/Function_Reference/wp_nav_menu

  • Hi,

    also das ganze funktioniert bei mir mit zwei Ebenen sauber. Das Hauptproblem ist eigentlich die dritte Ebene. Wie kann ich auf der zweiten Ebene den "Klick" mir merken, damit ich die Dritte Ebene programmatisch abfragen kann. Und folglich dieses Menü nur dann versuche anzuzeigen wenn der "Klick" aus der 2. Menüebene kam !?!? Ein wenig komplizier tausgedrückt glaube ich. Ich hoffe es versteht jemand.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!