WordPress Dropdown-Menü für mobile Geräte optimieren

Mobile Geräte kennen kein Mouseover

Jahrelang haben Webdesigner und -programmierer mit den anschaulichsten und praktischsten Mouseover-Effekten um sich geworfen. Mit dem mobilen Internet erleidet dieses Vorgehen allerdings eine Vollbremsung. Denn mobile Geräte kennen üblicherweise kein Mouseover und die erste Geste, die das Device mitbekommt, ist bereits der Klick oder der Touch.

Leidtragender ist von diesem Umdenken auch das Dropdown-Menü der Standard-WordPress-Themes, zumindest in bestimmten Fällen.

Konflikt zwischen Link und Aufklappen

Als Beispiel möchte ich meinen Reiseblog http://travel.bjoerne.com/ heranziehen. Dort setze ich ein hierarchisches Menü mit mehreren Ebenen ein. Um das zu veranschaulichen hier ein Screenshot aus dem Admin-Bereich:

wordpress_dropdown_admin_menu

1. Menüebene: Home, Über mich, ...; 2. Menüebene: Asien, ...; 3. Menüebene: Nepal, Taiwan, ...

Interessant ist, dass Reiseziele sowohl eine Art Container für die darunterliegenden Punkte ist, als auch selbst eine anklickbare Kategorie ist. Und genau hier liegt das Problem.

Auf dem "normalen" Computer kann ich mit der Maus über den Punkt Reiseziele fahren und es erscheint ein Dropdown-Menü.

wordpress_dropdown_menu

Auf dem mobilen Gerät kann ich nur Klicken oder Touchen, eine Mouseover ist nicht möglich. Mit dem Klick auf Reiseziele wird aber direkt eine neue Seite geladen, denn Reiseziele ist eine Aktikel-Kategorie. Die geladene Seite enthält alle Artikeln zu Reisezielen, egal wo auf der Welt. Mit dem mobilen Gerät ist eine Eingrenzung auf einen Kontinent oder ein Land nicht möglich, denn das Menü blitzt nur kurz auf.

Die Lösung: Menüpunkte, die Unterpunkte haben, dürfen nicht anklickbar sein

Ich habe mich für folgende Lösung entschieden. Ich ändere alle Menüpunkte, die Unterpunkte haben (z.B. Reiseziele, Asien), so dass diese nicht mehr anklickbar sind. Damit es aber weiterhin möglich ist, alle Artikel der Kategorien Reiseziele oder Asien anzeigen zu lassen, führe ich neue Menüpunkte ein. Diese bezeichne ich mit Alle. Mit den folgenden Schritten geht das:

Schritt 1: Link anlegen mit dem Namen der Oberkategorie

Ich möchte zunächst meinen Punkt Reiseziele (noch ist das eine Kategorie) durch einen neuen Punkt Reiseziele ersetzen, der ein reiner Container ist. Nur das Aufklappen des Untermenüs soll unterstützt werden aber kein Klick auf den Menüpunkt.

Zugegeben nicht ganz intuitiv: das ganze funktioniert über die Menüpunkt-Art Links. Dort füge ich den Namen Reiseziele ein und als URL #. Das # ist ein Workaround. Eigentlich will ich gar keine URL, das lässt WordPress aber an dieser Stelle nicht zu und ich muss es als separaten Schritt später durchführen.

wordpress_dropdown_menu_leeren_link_anlegen

Durch Klick auf Zum Menü hinzufügen erscheint der Punkt rechts in meinem Menü-Baum.

Schritt 2: URL auf leer setzen

Wenn ich den neuen Punkt jetzt ändere, kann ich die URL auf leer setzen:

wordpress_dropdown_menu_leeren_link_aendern

Schritt 3: Neuen Menüpunkt und alte Untermenüpunkte verschieben

Den neuen Punkt schiebe ich unter den alten mit demselben Namen. Anschließend verschiebe ich die Unterpunkte des alten Punktes, so dass der neue Punkt genau so aussieht wie der alte zuvor.

wordpress_dropdown_menu_admin_neuer_punkt

Schritt 4: Alten Punkt umbenennen und verschieben

Den alten Punkt verschiebe ich als obersten Punkt unter den neuen und setze Alle als Angezeigter Name.

wordpress_dropdown_menu_admin_alle

Schritt 5: Speichern und testen

Ich speichere das Menü und gehe mit dem Browser meines Computers auf die Seite. Reiseziele ist nicht mehr anklickbar und beim Mouseover erscheint das Untermenü. Der neue Punkt Alle ist anklickbar und bringt mich zu allen Artikeln der Kategorie Reiseziele.

wordpress_dropdown_menu_neuer_punkt

Auf dem mobilen Gerät kann ich auf den Punkt Reiseziele klicken bzw. touchen. Dann erscheint auch hier das Untermenü und es sind Menüpunkte anklickbar, die mir ohne diese Lösung nicht angeboten worden wären.

 

bjoerne_com_bjoern_weinbrenner_softwareentwickler_icon_leistungen_02

Lust auf mehr? Als Experte für WordPress und individuelle WordPress-Entwicklung kann ich Sie in Ihren Projekten unterstützen. Melden Sie sich gerne bei mir.

2017-01-28T13:52:43+00:00 04.11.2013|Tags: , , , , |16 Comments

16 Kommentare

  1. Achim Heise 21. Januar 2014 um 21:55 Uhr- Antworten

    Hallo Björn, vielen Dank für den tollen Tipp. Jetzt läuft meine Seite mit Untermenues auch auf dem Smartphone. 🙂 Super. DANKE. LG Achim

  2. Tobias von LinkHAMMER 3. April 2014 um 22:45 Uhr- Antworten

    Hi,

    sollte man nicht direkt lieber komplett auf Repsonsive Design umstellen?

    Beste Grüße

    • Björn Weinbrenner 4. April 2014 um 5:56 Uhr- Antworten

      Hallo Tobias!

      Meiner Meinung nach ist die beschriebene Maßnahme Teil eines responsiven Designs. Verstehst du das anders? Was schlägst du vor?

      Viele Grüße
      Björn

  3. Mattes 17. Juni 2014 um 14:30 Uhr- Antworten

    Hallo Björn,

    danke für den Tipp. Das hat mich echt genervt. Jetzt klappt es zumindest bei der einfach strukturierten Seiten.

    Mattes

  4. Edu 27. April 2015 um 14:20 Uhr- Antworten

    Hallo Björn,

    so weit so gut. Ich als absoluter Neuling in diesem Thema stehe nun vor dem Problem, dass die nicht anklickbaren Punkte wirklich nicht anklickbar sind -> in der Menüstruktur auf Mobilgeräten bzw auf kleinen Bildschirmen klappt das Menü nur auf, wenn man NEBEN dem Text klickt. Wenn man dagegen AUF den Text klickt oder toucht - passiert nichts. (Beispiel zum ansehen: http://www.djcredo.com/wordpress ) Suche schon seit Tagen verzweifelt nach einer Lösung... Was kann ich da machen?

    Vielen Dank & Grüße
    Edu

    • Björn Weinbrenner 28. April 2015 um 9:10 Uhr- Antworten

      Hallo!

      Das kann an einer konkreten, evtl. fehlerbehafteten Implementierung deines Themes MH Impact Lite liegen. In meinem Fall habe ich als Ausgangsbasis Twentytwelve von WordPress verwendet. Meistens ist das Theme verantwortlich für das Aussehen und die Funktionsweise von Menüs.

      Viele Grüße
      Björn

  5. Alex 27. März 2016 um 18:06 Uhr- Antworten

    Hi Björn, bin zufällig auf den Beitrag gestoßen da ich gerade mit dem gleichen Problem kämpfe!
    Grundsätzlich funktioniert dein Tipp gut, aber es sind ja bei TwentyTwelve noch immer alle Sub-Menü-Elemente ausgeklappt in der Mobile-Sicht. Auf deinem Blog hast du du das scheinbar dadurch gelöst, dass du die Elemente versetzt anzeigst (1. level ganz links, 2 level mittig usw.), während bei mir einfach alles zentriert untereinander erscheint (also z.B. Oberkategorie-Unterpunkt1-Unterpunkt2 etc. alles in einer Spalte). Wie kann ich das ändern und so lösen wie du in deinem Blog?

  6. Stephanie 5. April 2016 um 16:23 Uhr- Antworten

    Hallo Björn,

    vielen Dank für die ausführliche, leicht verständliche Anleitung. Das hat mir (als Laie) sehr weitergeholfen.

    Viele Grüße,
    Stephanie

  7. Melanie 22. Juni 2016 um 15:06 Uhr- Antworten

    Hallo Björn,
    tolle Tipps, allerdings werden bei der responsive Site alle, alle, alle Menüpunkte ausgespuckt, auch die nicht klickbaren...wo dann ja quasi gar keine Inhalt drinne ist.
    Hast du dafür einen Tipp?
    LG
    Melanie

    • bjoerne 4. Juli 2016 um 22:26 Uhr- Antworten

      Vielleicht per CSS ausblenden oder anders stylen. Um zu erkennen, welche das sind, bedarf es evtl. ein paar Zeilen JavaScript. Oder im schlimmsten Fall mit nth-child Pseudoklassen arbeiten, was aber nur Sinn macht, wenn die Navi sich nicht häufig ändert.

  8. Anne 4. Juli 2016 um 21:54 Uhr- Antworten

    Lieber Björn,
    Du hast gerade meinen Abend gerettet. Mit einem Rautezeichen.
    Danke!
    Anne

  9. Marianne 9. September 2016 um 15:26 Uhr- Antworten

    Hallo Björn,
    das Thema beschäftigt mich auch und ich finde keine Lösung. Eure Antworten sind ja schon etwas älter, ich finde nur bei der Menübearbeitung nicht das oben angebotene in der rechten Menüstruktur. Ich kann ein Menüpunkt hinzufügen, nur .den angezeigten Namen bearbeiten, finde also keine Möglichkeit auf Benutzerdefiniert oder Kategorie zu kommen. "Stehe ich auf dem Schlauch" oder sehen den Wald vor lauter Bäumen nicht?
    Vielleicht hilft ja ein Tipp von Euch?

    Danke und Grüße Marianne

  10. Elli 3. November 2016 um 11:06 Uhr- Antworten

    Hallo Björn,
    super Tipp, hat mir glatt den VHS-Kurs erspart. Danke dafür. 🙂
    An Marianne, bei mir steht auch nichts von Kategorie bzw benutzerdefiniert, sondern Individueller Link. Mir aber egal, hauptsache es klappt.

    Liebe Grüße aus Berlin

  11. Stefan 7. Dezember 2016 um 18:58 Uhr- Antworten

    Schöner Artikel, meiner Meinung nach mehr für Leute die gerade am Anfang stehen. Ich bin auf diesen Artikel bzw. den Blog gestoßen bei der Suche nach einer Hilfestellung für das Theme twenty eleven da ich hier Probleme habe es für Mobilgeräte zu optimieren (responsive). Bei dem Theme werden auf Handys die Menüs total doof angezeigt..

    Dennoch, schöner Artikel.
    Viele Grüße
    Stefan

  12. Daniel 10. Februar 2017 um 7:02 Uhr- Antworten

    Danke für den Tipp. Moderne Browser scheinen das auch sehr gut umzusetzen.

    Nur Microsofts Edge tanzt aus der Reihe. Bei dem klappt das Menü nach Drauftouchen direkt wieder zu -.-

  13. Robert 5. März 2017 um 23:14 Uhr- Antworten

    Leider funktioniert das nur solange, es 1 Menüpunkt mit Submenüelementen gibt. Sobald ein 2ter Individueller Link mit einem Submenü erstellt wird, kann WP das nicht mehr richtig interpretieren, da es ja nun 2 URLs auf leer gesetzt gibt.

Hinterlassen Sie einen Kommentar