Submenü woanders anzeigen

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

.sub-nav {display: none;}

2. Ebene:

.main-navigation li {display: none;}
.sub-nav {display: block;}

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/func…#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

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

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:

<nav class="main-navigation">
            <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>


</nav>

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:

<header id="masthead">
</header>
<div id="content">
              <div id="secondary">Sidebar</div>
              <div id="primary">Sidebar</div>
</div>
<footer id="colophon">
</footer>

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:

.main-navigation ul ul li {display: none;}/*Alle Listenelemente der zweiten Ebene werden ausgeblendet*/
.main-navigation ul li.current-page-parent ul li { display: block;} Die Kinder des aktuellen Listenelements der ersten Ebene werden wieder eingeblendet*/

Das war das Grundgerüst, ich hoffe, es nützt anderen.
Grüße
Raphael

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.