Dropdown-Navigation auf Touchscreen

Vanta schrieb am 04.09.2016 um 20:55 Uhr

Ich habe mir für die mobile Variante meiner Website mit dem Webdesigner Premium ein Dropdown-Menü eingerichtet. Dieses funktioniert mit der Maus auch wunderbar. Bloss nicht mit dem Finger auf einem Touchscreen... :-(

Wenn ich mit dem Finger auf den Menu-Button tippe, geschieht gar nichts. Das Menu klappt nur auf, wenn ich den Finger auf dem Menü-Button belasse. Dann kann ich auch zwischen den Menupunkten rumfahren, aber nur solange ich den Finger nicht abhebe. Und einen bestimmten Menupunkt auswählen geht auch nicht.

Das ganze hab ich auf einem Tablet und auf einem Smartphone getestet, jeweils unter Windows 10 und mit dem neuesten Edge-Browser. Leider kann ich es im Moment mit keinen anderen mobilen Browser testen. 

Oder hat das nichts mit dem Browser zu tun?

Kommentare

BeRo schrieb am 04.09.2016 um 21:56 Uhr

[...] Ich habe mir für die mobile Variante meiner Website mit dem Webdesigner Premium ein Dropdown-Menü eingerichtet [...]

Verrätst Du uns denn auch, wie Du das gemacht hast. 
Wahrscheinlich liegt die Ursache Deines Problems genau da, weil Du eventuell einen Button einer ganz normalen NavBar zu einem drop down Menü Button umfunktioniert hast?!

Wenn Du das so probiert hast, dann hast Du auch die u. a. Warnmeldung des WD gesehen? Da wird genau erklärt, warum eine normale NavBar auf einem mobilen Gerät nicht funktioniert, wenn ein Untermenü eingebaut wird...

Wie es richtig geht, das wurde im Forum schon öfter gepostet (z. B. hier). Eine gute Anleitung dazu findest Du auch in der Hilfedatei, unter dem Suchbegriff "Einzel-Button-Navigationsleiste"

Viel Erfolg

Zuletzt geändert von BeRo am 04.09.2016, 22:00, insgesamt 2-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

Vanta schrieb am 05.09.2016 um 22:37 Uhr

Hallo BeRo, vielen Dank für Deine Hinweise.

Das mit dem Erstellen einer Einzel-Button-Navigation hab ich wie beschrieben gemacht. Ich habe also auf der Mobilen Variante eine neue Navigation aus dem Online-Katalog geholt und alle Buttons bis auf den ersten gelöscht. Dann mit der Option "Site-Navigationsleiste" für jede vorhandenen Seite automatisch alle Menueinträge generieren lassen. Alle Menueinträge haben nun einen Link, ausser die oberste Ebene (der Button "Menu").

Und es funtioniert auch alles, solange ich die Maus benutze. Aber eben, auf einem Touchscreen passiert beim Antippen des Menu-Buttons nichts. Das Menu klappt nur auf, solange ich mit dem Finger auf dem Button verbleibe. Dann kann ich auch über die einzelnen Menupunkte fahren, jedoch keinen Link auslösen, eben weil ich den Finger nie abheben darf. Sobald ich den Finger abhebe, klappt die Navigation wieder ein. Kurzum: Ich kann gar nicht navigieren... :-(

Meine Vorstellung zur Funktion des Menus wäre so:

Ich tippe kurz den Menu-Button an.
Der Menubaum klappt auf und bleibt offen.
Ich tippe auf den gewünschten Link.
Die gewählte Seite wird geladen (und darin ist der Menubaum natürlich geschlossen).

Auch ok wäre es so:

Ich berühre den Menu-Button.
Der Menubaum klappt auf und bleibt offen, solange ich den Finger darauf belasse.
Ich fahre mit dem Finger auf den gewünschten Link.
Beim Loslassen wird die gewählte Seite geladen (und darin ist der Menubaum natürlich geschlossen).

Ich hab mir auch die Anleitung zu der von Dir entwickelten Lösung gelesen. Das ist alles ziemlich ausgeklügelt, aber auch sehr aufwendig. Nicht falsch verstehen: Ich nehme mir gerne die Zeit, um diese Lösung nachzubauen. Aber kann es denn wirklich sein, dass es nur auf diese Weise richtig zum funktionieren kommt? Ich hab mir auch die Template-Seite auf der Xara-Website angeschaut. Da gibt es viele Beispiele die so funktionieren, wie man es erwarten würde.

Oder mach ich vielleicht doch noch einen Denkfehler....?

BeRo schrieb am 06.09.2016 um 23:15 Uhr

[...] Oder mach ich vielleicht doch noch einen Denkfehler [...]

So, wie Du Dein Vorgehen beschreibst, sollte alles passen...

Um sicher zu sein, dass Du Dir keine Stolpersteine in den Weg gelegt hast, könntest Du die Einstellungen der NavBar mit einer der Vorlagen vergleichen, die Du in der Design-Galerie findest.

Zusätzlich kannst Du Dir auf dem Smartphone mal diese Demo ansehen, die ich gerade aus einer WD Vorlage erstellt habe.

Wenn's damit klappt, darfst Du in Deinem Projekt auf Fehlersuche gehen.

Viel Erfolg

P.S.

Der o. a. Link ist nur temporär gültig.
Weil vermutlich kein "öffentliches" Interesse besteht, lösche ich die Demo kurzfristig wieder vom Server...

Zuletzt geändert von BeRo am 06.09.2016, 23:16, insgesamt 2-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

Vanta schrieb am 07.09.2016 um 20:57 Uhr

Danke für den Link. Beim Ausprobieren auf einen Touchscreen verhält sich das Menu jedoch zumindest auf meinem Touchscreen nicht optimal. Wenn ich auf den Link "Navigationsmenü" tippe, geschieht nichts. Ich muss länger drauf bleiben, dann klappt das Menu auf und bleibt dann auch offen. Unschön ist dabei, dass ein Kontextmenu erscheint, weil der Browser glaubt, ich will die Button-Grafik speichern...

Ich hab nun einen anderen - vielleicht etwas simplen - Weg gefunden. Ich hab eine neue Ebene eingerichtet, in welcher die Navigationsbuttons liegen. Der Menu-Button, mit welchem ich die Navigationsbuttons aufrufe, liegt in der MouseOff-Ebene. Damit's etwas netter ausschaut, hab ich die Buttons noch in andere Farbe in die MouseOver-Ebene kopiert. Das Resultat siehst Du hier: www.altenbach-boden.ch (mobile Variante).

Vielen Dank für Deine Unterstützung (es ist meine erste Website mit dem Webdesigner...:-)

BeRo schrieb am 07.09.2016 um 23:09 Uhr

[...] Ich hab nun einen anderen - vielleicht etwas simplen - Weg gefunden [...]

Das sieht richtig gut aus und weicht wohltuend von der "Standardlösung" ab.

Also: Alles Bestens

Zuletzt geändert von BeRo am 07.09.2016, 23:09, insgesamt 1-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓