Mein mobiles Menü funktioniert nicht!

Kürzlich beklagte sich ein Kunde bei mir, dass die Navigation seiner Website auf mobilen Geräten nicht einwandfrei funktionierte. In der Tat wies das Menü sowohl in der Desktop-Ansicht als auch in der mobilen Version gleich mehrere Fehler auf. Untermenüs konnten nicht benutzt werden, ein offenkundiger Bug im mobilen Menü machte die Website auf mobilen Geräten unbrauchbar. Grund genug, der Sache einmal gründlich nachzugehen.

Wirklich lästig war in diesem Fall das fehlerhafte Verhalten des mobilen Menüs. Sobald die Menüleiste beim Scrollen den oberen Rand des Displays berührte, verschwand jeglicher Seiteninhalt. Das machte die gesamte Website in der mobilen Ansicht unbrauchbar.

Ein weiterer Fehler war, dass die Untermenüs der Navigation in der Desktop-Ansicht auf Tablets nicht benutzbar waren. Dieser Fall trat ein, wenn man zwar ein mobiles Endgerät benutzte, die Navigation aber noch nicht auf „mobil“ umgeschaltet hatte – also z.B. auf einem Tablet im Querformat.

Tippte man auf einem mobilen Endgerät einen übergeordneten Menüpunkt an, öffnete sich zwar das Untermenü, geladen wurde allerdings die jeweilige Elternseite – nämlich die, die man gerade angetippt hatte, um das Untermenü zu öffnen.

Schritt 1: Mobiles Menü benutzbar machen

Fehler eins war nicht ohne Weiteres zu beheben. Mit dem Theme-Autor Cyberchimps Kontakt aufzunehmen wäre zu umständlich und langwierig gewesen. Im Interesse einer schnellen Lösung musste also eine andere mobile Navigation her. Glücklicherweise (und dafür liebe ich WordPress) gibt es für solche Fälle ein Plugin.

WP Responsive Menu von Nirmal Ram bietet ein benutzerfreundliches und out-of-the-box benutzbares mobiles Menü. Es ist mit dem WP-eigenen Menü 100% kompatibel und bietet einige Möglichkeiten des Stylens in der Benutzeroberfläche. Die weitere Ausgestaltung kann über das CSS des Childthemes vorgenommen werden. Wann sich das mobile Menü dazuschaltet, kann in den Einstellungen des Plugins bestimmt werden. Besonders komfortabel: Das ursprüngliche Menü des Themes kann mit Angabe der jeweiligen CSS-Klasse in den Plugin-Einstellungen zeitgleich abgeschaltet werden.

Das Problem hätten wir also gelöst. Mit wenigen Handgriffen (und nach intensiver, stundenlanger Recherche) war die Website mit einem benutzerfreundlichen, plattformübergreifenden mobilen Menü ausgestattet.

Schritt 2: Untermenüs zugänglich machen

Googelt man nach Begriffen wie „wordpress mobile menu submenu“, findet man massenweise Fragen bezüglich des oben beschriebenen Bugs. Viele Theme-Designer testen ihre Kreationen anscheinend nicht auf mobilen Endgeräten, sondern geben sich damit zufrieden, das Browserfenster ihres Desktops zu verkleinern. Das Touch-Verhalten ihrer Menüs können sie auf diese Weise allerdings nicht überprüfen. So passiert es häufig, dass bereits die erste Berührung eines Menüpunktes eine Seite öffnet anstatt lediglich das Untermenü zu zeigen.

Abhilfe schafft hier das Plugin Black Studio Touch Dropdown Menu der italienischen Agentur Black Studio. Ein Javascript sorgt für das korrekte Touch-Verhalten eines beliebigen Menüs; das Plugin benötigt keinerlei weitere Einstellungen.

In der Tat konnte auch dieses Problem mit der Installation des Plugins sofort behoben werden.

Fazit

Sowohl für Theme-Entwickler als auch für Webdesigner lohnt es sich, das Verhalten einer Website IMMER vor der Auslieferung auf wenigstens einigen, gängigen mobilen Endgeräten zu testen.


Beide Plugins im Einsatz: www.salzhemmendorf.de