Blog

Auf dieser Seite archiviere ich in unregelmäßigen Abständen Code-Schnipsel/Snippets.
Auch wenn ich das hauptsächlich für mich mache,
freue ich mich, wenn andere Menschen davon profitieren können.
Kommentare und Feedback sind erwünscht!

Themen:

WordPress Submenü erst beim Klick öffnen

In diesem Beitrag archiviere ich eine kleine Anleitung, wie man das Submenü / Untermenü innerhalb des normales WordPress Menüs erst per Klick angezeigt bekommt.
So funktioniert das Menü auch auf mobilen Endgeräten, ohne dass ich ein Hamburger-Menü o.ä. benutzen muss.

Bei einem Projekt hatte ich den (gar nicht so seltenen) Fall, dass manche Menü-Punkte der ersten Ebene sehr viele Unterpunkte bekommen sollten.
Ich selbst bin in den meisten Fällen kein Fan vom Hamburger Menü (wem der Begriff nicht so geläufig ist – ich rede von den drei waagerechten Balken, die meist als Button zum Ein- und Ausblenden des Menüs verwendet werden: ).
Doch da gerade in diesem Fall die Zielgruppe auch viele nicht web-affine Menschen einschloss, habe ich es für sinnvoll gehalten, eine andere Lösung für eine mobile Navigation zu finden.

Demo

Eigenes Menü registrieren

Zuerst muss ich das Menü natürlich registrieren.
Dazu setzte ich diese Funktion in meine functions.php:


<?php
function navigation() {
   register_nav_menus(array(
         'main-menu' => __( 'Hauptnavigation' ),
      ));
   }
}
add_action( 'init', 'navigation' );
?> 

In meiner header.php gebe ich dieses dann an gewünschter Stelle aus:


<?php 
wp_nav_menu(array(
     'container' => 'nav', 
     'container_class' => 'navigation')); 
?> 

Im Backend vom WordPress kann ich jetzt unter Design > Menüs dieses Menü mit meinem Navigationspunkten der ersten und zweiten Ebene füllen.

 

Wichtig!
Da ich ja nicht möchte, dass die Menüpunkte der ersten Ebene die Unterpunkte (childs) besitzen auf eine Seite verlinken, darf ich diese nicht als Verweis anlegen.
Dazu klicke ich links auf „Individuelle Links“ und erstelle einen Link ohne Ziel. Dazu einfach Link-Text eingeben und URL Feld leer lassen.

 

Das WordPress Menü

Nun habe ich mir das Markup von dem Menü angesehen, wie es im „Frontend“ angezeigt wird:
Hier ist an Klassen etc. nur das zu sehen, was mich in diesem konkreten Fall interessiert.


<nav> 
   <ul class="menu">  
      <li><a class="current-menu-item">Menüpunkt 1</a></li>
      <li class="menu-item-has-children"><a>Menüpunkt 2</a>
         <ul class="sub-menu">
            <li><a>Unterpunkt 1</a></li>
            <li><a>Unterpunkt 2</a></li>
         </ul>
      </li>
      <li><a>Menüpunkt 3</a></li>      
      <li class="menu-item-has-children"><a>Menüpunkt 4</a>      
         <ul class="sub-menu">            
            <li><a>Unterpunkt 1</a></li>
            <li><a>Unterpunkt 2</a></li>
            <li><a>Unterpunkt 3</a></li>
         </ul>
      </li>
      <li><a>Menüpunkt 5</a></li>
   </ul>
</nav>

Auf die style.css gehe ich an dieser Stelle nicht näher ein.

Funktion schreiben

Um die Liste (ul) mit der Klasse sub-menu nur beim Klick anzuzeigen, benötige ich dieses kleine Script:


$(document).ready(function() {
   $("li.menu-item-has-children").click(function() {
      $(this).closest("li").find("ul.sub-menu").slideToggle("slow");
      $(this).closest("li").toggleClass("current-menu-item").siblings().removeClass("current-menu-item");
      $(this).closest("li").siblings().find(".sub-menu").slideUp("slow");
   });
});

Erklärung

1. Zeile: Wenn der Quelltext der Seite fertig geladen ist, führe folgende Funktion aus

2. Zeile: Wenn ein Element li mit der Klasse menu-item-has-children angeklickt wird, dann…

3. Zeile: … suche vom nächstgelegenen Element li das nächste Element ul mit der Klasse sub-menu

4. Zeile: … füge dem nächstengelegenen Element li die Klasse current-menu-item zu und lösche die Klasse gleichzeitig von anderen Elementen li
Für den Fall, dass jemand alle Menüpunkte durchgeklickt, bevor er/sie einen Unterpunkt anklickt

5. Zeile: … suche beim nächstengelegenen Element li das nächstgelegene Element ul mit der Klasse sub-menu und blende diese aus

 

Das wars schon.
Das Script muss jetzt noch im Theme angegeben werden. Dazu am besten die functions.php (Siehe Codex) nutzen.


12. Oktober 2016

1

Ein Kommentar zu “WordPress Submenü erst beim Klick öffnen”

i-love-gütesiegel schreibt:

Hallo liebes Janarange-Team,

eine wirklich gelungene Anleitung für die optimale Nutzung des WordPress Submenüs. Sich durch eine sehr gute Optimierung von anderen abzuheben ist wichtig! Aber auch die Kundenzufriedenheit auf der eigenen Seite sollte nicht zu kurz kommen. Das glaubt ihr nicht? Dann schaut auf https://kundentests.com/guetesiegel vorbei und macht euch selbst ein Bild davon! Wir freuen uns auf euer Feedback!

Liebe Grüße


10. Februar 2017

11:58 Uhr

Schreib einen Kommentar