Sub-Navigation erstellen für Unterseiten und -rubriken in WordPress

Sub-Navigation erstellen für Unterseiten und -rubriken in WordPress

Wie man mit einem jQuery Einzeiler eine voll funktionsfähige Sub-Navigation in WordPress erstellt

Wenn man in WordPress eine Sub-Navigation erstellen möchte, ist man erstmal etwas aufgeschmissen. Man hat seine Haupt-Navigation unter Menüs entweder nach dem eigenen Bedarf per Hand erstellt, oder lässt automatisiert alle neu erstellten Seiten dort einordnen entsprechend der Seiten-Struktur der Website. Direkt zur Lösung springen…

Mit gängigen Themes hat man meist damit schon alles, was man braucht: In der Regel eine Haupt-Navigation, wo die Unterseiten meist per CSS oder jQuery oder ähnlichem ausklappen, und weitere Menüpunkte zeigen. Nach dem gleichen Prinzip funktioniert dann auch die Mobil-Ansicht einer gängigen Navigation. Entweder DropDown Menü, oder ein Menu, das von der Seite als Overlay reinfadet, etc. In der Regel gibt es bei der Mobildarstellung des Menüs der Übersichtlichkeit wegen meistens auch Unterverzeichnisse, die weiter ausklappen.

Die meisten Anwendungsfälle sind somit häufig mit einem einzigen WordPress Menü abgedeckt und in der Regel auch gut zu navigieren.

Sonderfall Sub-Navigation / Unter-Menü

Was aber, wenn je nach Seiten-Struktur auf einzelnen Unterseiten oder mehreren Unterseiten eines Haupt-Menüpunktes eine zusätzliche Navigation angezeigt werden soll, z.B. in der Sidebar, oder unterhalb der Hauptnavigation? Früher war das durchaus üblich und hat natürlich auch heute noch seine Daseinsberechtigung, aber in Zeiten von Mega-Flyout-Menüs und dergleichen findet man das heute eher selten oder auf wirklich großen Web Portalen, die kaum anders zu navigieren sind aber häufig auch auf einem größeren CMS laufen.

Bei WordPress ist man da etwas alleingelassen, man könnte hier extra (Sub-)Menüs erstellen und diese auf den Unterseiten explizit einbinden. Dies kann natürlich schnell unübersichtlich werden und wird bei der Standard WordPress Menü Erstellung per Hand oder halbautomatisert irgendwann nicht mehr wartbar.

Sub-Navigation aus dem vorhandenen Haupt-Menü ableiten

Da die Hauptnavigation in der Regel die Gesamtstruktur wiedergeben sollte und es sich bei der zu erstellenden Sub-Navigation nur um einen Teilausschnitt der Gesamtstruktur handeln soll, liegt es nahe, direkt auf das Hauptmenü zuzugreifen und irgendwie den Teil für die Sub-Navigation einzeln erneut auszugeben.

Sub-Navigation per CSS

Eine Möglichkeit, nur einen Teil der Menüstruktur anzuzeigen, wäre es, die Hauptnavigation ein zweites Mal (z.B. im Header des gewählten Themes) auszugeben und alle Teile quasi zu maskieren, die für die Sub-Navigation irrelevant sind.

In der header.php des verwendeten Themes würde man dafür schematisch etwa folgendes machen:

<header id="header-id" class="header-class" role="banner">
 <div id="header-full-width">
  <div id="header-logo-left">
    ...
  </div>
  <div id="header-nav-mid">
   <div id="header-nav-main-mid">
    <nav id="site-navigation" class="main-navigation desktop-nav" role="navigation">
     <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
    </nav><!-- #site-navigation --> 
   </div>
   <div id="header-nav-sub-mid">
    <nav id="sub-navigation" class="main-navigation desktop-nav" role="navigation">
     <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu desktop-nav sub-nav' ) ); ?>
    </nav> <!-- #sub-navigation --> 
   </div>
  </div>
  <div id="header-search-right">
   ...
  </div>
 </div>
</header>

Man hat dann quasi 2x das gleiche Menü im Header und würde jetzt per CSS alle Teile ausblenden, die nicht relevant für die Sub-Navigation sind. Es empfiehlt sich NICHT, hierbei mit einer Schachtelung von display: none; und darunter wieder display:block; zu arbeiten, das funktioniert nicht.

Wenn man etwa versucht die äussere Struktur zu verstecken und nur das erforderlich Element wieder sichtbar zu machen

<div style="display:none">
  <nav>
    <ul>
     <li class="current-parent active">
      <ul id="ab-hier-sichtbar" class="sub-menu" style="display:block;">
        <li class="current-parent active"></li>
      </ul>
    </li>
   </ul>
  </nav>
</div>

wird das Resultat nur sein, dass man gar nichts von der Navigation sieht. Man kann versuchen, das mit einer Schachtelung von visibilty: hidden; und darin wieder visibility: visible; zu lösen, das geht prinzipiell, man muss allerdings hierbei die offsets der Standard CSS Formatierung (des Themes) korrigieren. Die Vorgehensweise per CSS erscheint zwar einfach, aber ein existierendes Styling umzuschreiben, so dass es auf den eigenen Use Case passt kann ziemlich aufwendig sein und trotz viel Testerei kann einem das Layout manchmal um die Ohren fliegen.

Bei einem Kundenprojekt, wo einfach nur in einer zweiten Zeile unterhalb des Hauptmenüs (mehrere Ebenen) die Unterseiten des jeweils ausgewählten Hauptmenüpunktes zur weiteren Navigation stehen sollten, war die korrekte Positionierung der Unterseiten in der Sub-Navigation deratig schwierig und unbefriedigend, das nach einer einfacheren Lösung gesucht wurde.

Copy & Paste per jQuery

Die denkbar einfachste Variante dürfte es sein, den vorhandenen Teil der Navigation einfach auszuschneiden (bzw. zu kopieren) und an einer passenden Stelle wieder einzufügen. Dann kann man die Sub-Navigation stylen wie man sie braucht, ohne mit der Standard-CSS-Formatierung des Themes durcheinander zu kommen und unsauberes CSS, fortlaufend !important und x Ausnahmefälle zu berücksichtigen.

In der Regel haben die WordPress Menüs irgendeine Art von CSS Klasse oder ID, welche den aktuell ausgewählten Menüpunkt kennzeichnet. Evtl. muss man sich den entsprechenden gerenderten HTML Source Code mal anschauen. Im Beispiel hier war für den Sub-Tree, der für die Sub-Navigation verwendet werden sollte die CSS Klasse current-menu-parent eindeutig. Unter diesem <li> Listen Element hängt eine unsortierte Liste <ul class="sub-menu"> mit weiteren Listen Einträgen, die das Sub-Menü ergeben werden. Hier einfach per jQuery ansetzen und das selektierte Element kopieren und an ein geeignetes HTML Elemnent wieder anhängen – hier das <div id="header-nav-sub-mid">

Mit jQuery reicht dafür sage und schreibe ein Einzeiler und die Sub-Navigation ist eingefügt

 <script>jQuery( "#header-nav-main-mid .current-menu-parent > ul.sub-menu" ).clone().appendTo( "div#header-nav-sub-mid" );</script>

man muss sie nur noch ein wenig stylen, das bleibt aber dem eigenen Geschmack oder den Projektanforderungen vorbehalten.