Dropdown Navigation auf Touchscreens - Überdeckung durch Kontextmenü des Links

Druckbare Version

11.03.2020, 09:33
Ernestopheles

Liste der Anhänge anzeigen (Anzahl: 1)

Dropdown Navigation auf Touchscreens - Überdeckung durch Kontextmenü des Links

Liebes Forum,

ich verwende bei der Seite http://zukunftsforum-rissen.de das abgewandelte MATE theme. Und ich suche nach einer einfachen Möglichkeit, den unerwünschten Hover-Effekt über dem Link auszublenden:

Bei Berührung eines Dropdown-Menüpunktes mit dem Finger erscheint wie gewünscht das Dropdown-Menü, es wird allerdings durch das Kontextmemü des Links, der auf die Seite des Menüpunktes der ersten Ebene verweist, überlagert. Erst nach Tippen auf eine Fläche der Webseite außerhalb dieses Popups hat man das Dropdown Menü im Zugriff.

Was ich bisher im Forum darüber gelesen habe, erscheint mir momentan zu aufwändig oder ungeeignet.
11.03.2020, 18:22
hjo

Hallo Ernestopheles,

wenn ich die Seite http://zukunftsforum-rissen.de auf meinem Handy aufrufe funktioniert die Benutzung des Menüs normal. Ich bekomme kein Kontextmenü angezeigt.

Hans-Jürgen
11.03.2020, 18:46
derRenner

Ich kann dein Problem auch nicht nachstellen ... das Menü kann einwandfrei bedient werden.
12.03.2020, 10:34
Ernestopheles

mittlere Bildschirmgröße!

Zitat:

Zitat von derRenner

Ich kann dein Problem auch nicht nachstellen ... das Menü kann einwandfrei bedient werden.

Sorry, da habe ich mich wohl unkar ausgedrückt.

Das Problem taucht bei der horizontalen Navigationszeile auf, nicht aber beim Navigationsbutton. Letzterer erscheint auf kleinen Schirmen, also Handy und Tablet 10,5 Zoll Hochformat.

Bei tablets 10,5 Zoll Querformat kann man das Problem nachstellen. Siehe auch mein Foto.

Ich verstehe das Mißverständnis, denn letztlich öffnet sich ja auch beim Klick auf den Navigationsbutton ein Dropdown-Menü, das war aber nicht gemeint.
13.03.2020, 09:15
Ernestopheles

Gedanken dazu

Also offenbar liegt die Ursache für das Problem darin, dass die Dropdown Menüs historisch gewachsen für passive Bildschirme konzipiert sind, die mit der Tastatur oder einer Mouse bedient werden. Hier gilt: Mouse-Over = hover = Herunterklappen des Dropdown Menüs der Navigation. Und: rechte Maustaste (Linux, Windows, ...) = Kontextmenü = systemseitiges Dropdown Menü für den Link.
Bei der üblichen Bedienung eines Touchscreens durch Berührung werden dummerweise beide Aktionen ausgelöst: Beide Dropdowns werden heruntergeklappt und überlappen sich.
Daher - und weil bei einer kleinen Bildschirmfläche i.d.R. kein Platz für eine Navigationsleiste ist - wurde der Navigationsbutton erfunden. Dieser löst beide Probleme.

Als Lösung für Touchscreens bei mittleren (z.B. 10,5 Zoll Querformat) und großen Bildschirmen sehe ich daher zwei Möglichkeiten:
1. Auch hier den Navigationsbutton einsetzen - obwohl Platz genug für eine Navigationsleiste ist
2. Die Navigationsleiste so anpassen, dass das Kontextmenü nicht erscheint.

Lösung 2. wurde ja offensichtlich beim Navigationsbutton implementiert, denn hier erscheint ebenfalls kein Kontextmenü, auch nicht auf den unteren Navigationsebenen.

Ich persönlich bevorzuge Lösung 2, wäre aber erstmal auch mit Lösung 1 sehr zufrieden.

Für beides suche ich hier eine einfache (wenn möglich - ich verwende das MATE theme und möchte momentan ungern zu viele Anpassungen vornehmen) Lösungsmöglichkeit.

Danke für eure Unterstützung.
13.03.2020, 19:05
lucina

Nach wie vor kann ich Dein Problem nicht nachvollziehen. Deine Seite lässt sich aus meiner Sicht auf jedem Gerät problemlos bedienen.

Dein Screenshot lässt mich aber denken, dass Du möglicherweise Bedienungshilfen wie Assistive Touch aktiviert hast.

Gesendet von iPhone mit Tapatalk
13.03.2020, 20:03
Ernestopheles

Zitat:

Zitat von lucina

Nach wie vor kann ich Dein Problem nicht nachvollziehen. Deine Seite lässt sich aus meiner Sicht auf jedem Gerät problemlos bedienen.

Dein Screenshot lässt mich aber denken, dass Du möglicherweise Bedienungshilfen wie Assistive Touch aktiviert hast.

Gesendet von iPhone mit Tapatalk

Nein, habe ich nicht. Ich habe diesen Effekt auf einem Galaxy Tab S2 und S5e.
13.03.2020, 20:16
fiedsch

Ih habe nur ein ganz altes iPad2 und da funktionieren die Menüs: wenn ich einen Menüpunkt mit Unterkpunkten kurz "touche" (klicke), geht das Untermenü auf. Das entspricht dem Hover mit der Maus am PC. Wenn ich lange auf einem Menüpunkt (oder beliebigem Link auf der Seite!) bleibe, bekomme ich ein Kontextmenü, das ähnlich aussieht, wie das in Deinem Screenshot. Das ist m.E. aber das ganz normale Verhalten eines Tablets. Warum bei Dir das Kontextmenü sofort erscheint kann ich dir leider nicht sagen.
13.03.2020, 20:38
Ernestopheles

Hinweis

Habe es mal weiter untersucht.

Beim Navigationsbutton-Menü sind Text und Pfeil nach unten 2 getrennte Elemente.
Bei der horizontalen Navigationsleiste sind Text und Pfeil nach unten offenbar in ein und demselben Element. Daher löst die kurze Berührung auf den Pfeil bei der Bar den Link aus und beim Buttonmenü das Dropdown.

Offensichtlich ist es üblich, Text und Pfeil im selben Element anzuordnen, siehe auch auf dieser Seite hier. Der entscheidende Unterschied zu meiner Seite liegt vielleicht darin, dass bei meiner Seite der erste Menüpunkt keine Überschrift ist - wie bei contao community, sondern eine Seite (interne Weiterleitung auf den 1. Menüpunkt der 2. Ebene). Also wäre eine Lösung, das Navigationsmenü so zu erstellen, dass auf der ersten Ebene - im Falle dass weitere Ebenen vorhanden sind - kein Link auf eine Seite steht, sondern lediglich eine Überschrift. Wie erreicht man das mit Contao?

Ich verstehe leider nicht, warum ihr das Problem bei euren Geräten nicht habt. Ich habe nichts extra eingestellt, weder bei den Bedienungshilfen noch bei der Eingabe.
13.03.2020, 20:40
Ernestopheles

Zitat:

Zitat von fiedsch

Ih habe nur ein ganz altes iPad2 und da funktionieren die Menüs: wenn ich einen Menüpunkt mit Unterkpunkten kurz "touche" (klicke), geht das Untermenü auf. Das entspricht dem Hover mit der Maus am PC. Wenn ich lange auf einem Menüpunkt (oder beliebigem Link auf der Seite!) bleibe, bekomme ich ein Kontextmenü, das ähnlich aussieht, wie das in Deinem Screenshot. Das ist m.E. aber das ganz normale Verhalten eines Tablets. Warum bei Dir das Kontextmenü sofort erscheint kann ich dir leider nicht sagen.

Danke dir, aber apple hat ja eh sehr eigenwillige Lösungen... Hat es mal jemand mit einem Android tablet versucht?
13.03.2020, 20:42
Ernestopheles

Zitat:

Zitat von fiedsch

Warum bei Dir das Kontextmenü sofort erscheint kann ich dir leider nicht sagen.

Auch bei mir erscheint es erst bei langem Druck, dann aber beide Menüs. Bei kurzer Berühren wird lediglich der Link auf die Seite ausgelöst.
13.03.2020, 21:06
derRenner

Ich denke, dass ich dein Problem nun nachstellen kann ... auf einem "Uralt"-Android Tablet.
Wobei bei meinen Versuchen, das Dropdown-Menü gar nicht offen bleibt, sondern nur kurz aufblitzt und wieder verschwindet und stattdessen das Kontextmenü erscheint. Bei längerem touch kommt wie erwartet das Kontextmenü. Ob ich dabei nur den Pfeil oder das daneben befindliche Menüpunktfeld erreiche, kann ich nicht beurteilen - das erkenne ich nicht ... wohl bedingt durch die sehr kleine Fläche des Pfeiles <i>.

Tipp: stelle via CSS mal das padding des Pfeiles auf eine Grösse der Fingerkuppen und suche weiter. Womöglich erreichst du beides beim touch - also das <a> und das <i> gleichzeitig und erzeugst genau dieses Problem. Ansonsten würde ich die Entwickler des themes hierzu anschreiben bzw. ein issue auf github eröffnen.
17.03.2020, 13:53
Ernestopheles

Danke, habe das Problem gemeldet https://github.com/contao-themes-net...ndle/issues/46