1. Herzlich willkommen bei WPDE.org, dem grössten und ältesten deutschsprachigen Community-Forum rund um das Thema WordPress. Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können.
    Information ausblenden

Submenü woanders anzeigen

Dieses Thema im Forum "Konfiguration" wurde erstellt von bionade, 19. März 2016.

  1. bionade

    bionade Well-Known Member

    Registriert seit:
    11. August 2008
    Beiträge:
    409
    Zustimmungen:
    0
    Hi Community,
    ich arbeite gerade an einer Seite bei der die statischen Seiten auf zwei Navi-Ebenen verteilt sind. Das Layout sieht vor, dass die 2. Ebene (.sub-nav) an einer anderen Stelle angezeigt wird als die erste. Zunächst dachte ich, dass das total leicht wäre. Aber mein erster Versuch hat nicht funktioniert. Der war ca. so:
    1. ebene
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    2. Ebene:
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Das funktioniert offensichtlich nicht, weil .sub-nav ein Teil des ausgeblendeten .main-navigation li ist. Schade, wäre so schön einfach gewesen. ;)

    Als nächstes habe ich dann gesucht ob es im Web Lösungen gibt und ganz erstaunt festgestellt, dass eine Menge Leute mit dieser scheinbar so simplen Aufgabe Probleme haben. Nachdem ich weder ein Plugin noch eine "moderne" Codelösung gefunden habe, habe ich mich entschlossen mit wp_list_pages zu arbeiten. Da gibt es eine Reihe von Ansätzen, z. B. hier: https://developer.wordpress.org/reference/functions/wp_list_pages/#List_Sub-Pages

    Das Problem ist also mal vorerst entschärft, aber wirklich glücklich bin ich nicht. Mit wp_list_pages verliere ich natürlich die komfortable Möglichkeit die Menüpunkte im Adminbereich per drag&drop zu sortieren. Also frag ich mal im Forum, ob jemand einen moderneren Ansatz kennt. Ich hab leider kein Plugin gefunden und hab vorerst auch keine Idee, wie man sich das selbst coden könnte. Aber möglich muss es doch sein. (?)

    Danke für Ideen
    Raphael
     
  2. helix

    helix Well-Known Member

    Registriert seit:
    28. Juli 2011
    Beiträge:
    1.808
    Zustimmungen:
    27
    „Woanders anzeigen“ ist natürlich eine seeeeehr ungefähre Angabe.

    Mein erster Lösungsversuch würde in Richtung absolute Positionierung schielen. Wenn das Layout es irgendwie hergibt, dass die beiden Ebenen der Navigation sich auf einen gemeinsamen übergeordneten Container (kann auch mehrere Elemente drüber sein) „einigen“ können, müsste das gehen. Die Navigation bleibt position: static; (default-Wert, es muss also nix definiert werden). Die zweite Ebene bekommt position: absolute; und orientiert sich am nächsten übergeordneten Element, das positioniert ist. Wenn da keines ist (das positioniert ist), am body.

    Ansonsten fällt mir ein: Tatsächlich zwei / mehrere Menüs anlegen.
    Das wird aber mit dem highlighten wesentlich komplizierter, wenn das denn gebraucht wird (.current-menu-parent etc.)

    Und dann kannst du natürlich mit multiplen Loops so etwa alles machen, was du willst. Aber vielleicht doch eher der Reihe nach: probier die absolute Positionierung oder schreib hier, warum es nicht geht.

    Gruß
    helix
     
  3. bionade

    bionade Well-Known Member

    Registriert seit:
    11. August 2008
    Beiträge:
    409
    Zustimmungen:
    0
    Ja, an absolut positionieren hatte ich auch schon gedacht. Es erschien mir nur irgendwie unsauber, deshalb hatte ich es verworfen. Allerdings war mein "unsauberer" Lösungsansatz anders: Ich hätte ein Menü so gemacht, dass nur die oberste Ebene angezeigt wird und dann das selbe Menü (.main-navigation) woanders aufgerufen, die erste Ebene mit CSS aus dem Browserfenster verschoben und die zweite Ebene dann absolut positioniert. Aber das war wohl ums Eck gedacht. Deine Lösung ist viel einfacher. Ich probiers jedenfalls mal und melde mich wieder.

    Danke!
    Raphael
     
  4. bionade

    bionade Well-Known Member

    Registriert seit:
    11. August 2008
    Beiträge:
    409
    Zustimmungen:
    0
    Ja, funktioniert super, danke. Ich schreib mal hier die Basisinfos auf, falls das jemand anderer nutzen möchte:

    1) Die Voraussetzung ist, dass beide Menüteile auf einer gemeinsamen Seite angezeigt werden können, bzw. in einem gemeinsamen <div> platziert sind. Damit man die Vorteile der komfortablen Menüsortierung im Adminbereich nutzen kann, ist es notwendig das Menü so aufzurufen:
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    2) In meinem Fall ist es so, dass ich das _s-master Theme nutze, das ist ein leeres Theme und daher natürlich auf solche Veränderungen gut vorbereitet. Es hat - grob gesagt - folgende Struktur:
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Mein Wunsch war es, dass die 1. Ebene in der Sidebar angezeigt wird, die 2. Ebene horizontal unterhalb des Headers.

    Damit das funktioniert waren ein paar einfache Schritte notwendig:
    1) Ich habe das Menü in das <div> mit der id "content" platziert und dieses <div> mit "position: relative" ausgestattet. Die erste Ebene habe ich im diesem <div> senkrecht, links platziert, als Pseudosidebar sozusagen. Die Sidebar war dann nicht mehr notwendig, daher habe ich sie entfernt.

    2) Die zweite Ebene habe ich dann absolut positioniert, das geht z. B. so: .main-navigation ul ul {position: absolute;} Dann wird sie im oberen, linke Eck von #content angezeigt. mit top und left kann man jedes absolute Element beliebig verschieben, das ist ja leicht und das habe ich natürlich genutzt um die ideale Position zu finden. Dann musste ich natürlich noch die einzelnen <li> so stylen, wie ich sie wollte. In dem Fall sollten diese Elemente waagrecht nebeneinander sein, also habe ich sie als Blockelemente definiert, sie in der Breite beschränkt und links floaten lassen. Dann werden sie alle nebeneinander angezeigt.

    3) OK, das wars schon fast. ;) Das Problem jetzt: Wenn mehrere Menüpunkte eine zweite Ebene haben, dann werde alle Unterpunkte gleichzeitig und - durch die absolute Positionierung - übereinander liegend angezeigt. Ich musste also noch CSS hinzufügen damit nur die aktuellen Unterpunkte sichtbar sind. Das ging in meinem Fall so:

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Das war das Grundgerüst, ich hoffe, es nützt anderen.
    Grüße
    Raphael
     
    #4 bionade, 20. März 2016
    Zuletzt bearbeitet: 20. März 2016
  5. helix

    helix Well-Known Member

    Registriert seit:
    28. Juli 2011
    Beiträge:
    1.808
    Zustimmungen:
    27
    Danke für deine ausführliche Erklärung.

    Ich finde das nicht selbstverständlich, dass sich jemand die Mühe macht, seinen Lösungsweg nochmal detailliert und nachvollziehbar zu posten. Danke!

    Gruß
    helix
     
  6. bionade

    bionade Well-Known Member

    Registriert seit:
    11. August 2008
    Beiträge:
    409
    Zustimmungen:
    0
    Na ja, ich beziehe ja ziemlich viel Wissen aus dieser Seite. Daher bemühe ich mich für jede Frage, die ich stelle, auch irgendwas Sinnvolles zu tun. Andere Fragen beantworten oder - so wie hier - Lösungen beschreiben. Da gehts ja nicht nur darum "nett" zu sein, sodern das ist auch im eigenen Interesse. Das Forum ist nur so gut wie seine Beiträge. Und nur fragen geht halt nicht.

    In dem Fall wars besonders sinnvoll den Lösungsweg zu beschreiben, denn das Web ist voll mit Leuten, die genau das selbe Problem haben, wie ich es hatte. Bei anderen CMS scheint das eine Standardfunktion zu sein, bei WP scheinbar nicht. Wundert mich, dass noch niemand ein Plugin dafür geschrieben hat.
     
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden