Das Contao Camp 2020 in Hamburg. LEIDER ABGESAGT!
Ergebnis 1 bis 13 von 13

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

  1. #1
    Contao-Nutzer
    Registriert seit
    25.10.2019.
    Ort
    Hamburg
    Beiträge
    70

    Standard 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.
    Angehängte Grafiken Angehängte Grafiken
    Geändert von Ernestopheles (11.03.2020 um 13:29 Uhr) Grund: Anhang hinzugefügt

  2. #2
    Contao-Nutzer Avatar von hjo
    Registriert seit
    08.01.2013.
    Ort
    Wuppertal
    Beiträge
    57

    Standard

    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

  3. #3
    Contao-Urgestein Avatar von derRenner
    Registriert seit
    23.10.2012.
    Ort
    hoRn|waldviertel
    Beiträge
    1.759
    User beschenken
    Wunschliste

    Standard

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


  4. #4
    Contao-Nutzer
    Registriert seit
    25.10.2019.
    Ort
    Hamburg
    Beiträge
    70

    Standard mittlere Bildschirmgröße!

    Zitat Zitat von derRenner Beitrag anzeigen
    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.

  5. #5
    Contao-Nutzer
    Registriert seit
    25.10.2019.
    Ort
    Hamburg
    Beiträge
    70

    Standard 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.

  6. #6
    Administratorin Avatar von lucina
    Registriert seit
    19.06.2009.
    Ort
    Kiel (DE)
    Beiträge
    6.613
    Partner-ID
    152
    User beschenken
    Wunschliste

    Standard

    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

  7. #7
    Contao-Nutzer
    Registriert seit
    25.10.2019.
    Ort
    Hamburg
    Beiträge
    70

    Standard

    Zitat Zitat von lucina Beitrag anzeigen
    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.

  8. #8
    Contao-Urgestein Avatar von fiedsch
    Registriert seit
    09.07.2009.
    Ort
    München
    Beiträge
    2.395

    Standard

    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.
    Contao-Community-Treff Bayern: http://www.contao-bayern.de

  9. #9
    Contao-Nutzer
    Registriert seit
    25.10.2019.
    Ort
    Hamburg
    Beiträge
    70

    Standard 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.

  10. #10
    Contao-Nutzer
    Registriert seit
    25.10.2019.
    Ort
    Hamburg
    Beiträge
    70

    Standard

    Zitat Zitat von fiedsch Beitrag anzeigen
    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?

  11. #11
    Contao-Nutzer
    Registriert seit
    25.10.2019.
    Ort
    Hamburg
    Beiträge
    70

    Standard

    Zitat Zitat von fiedsch Beitrag anzeigen
    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.

  12. #12
    Contao-Urgestein Avatar von derRenner
    Registriert seit
    23.10.2012.
    Ort
    hoRn|waldviertel
    Beiträge
    1.759
    User beschenken
    Wunschliste

    Standard

    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.
    Grüsse
    Bernhard


  13. #13
    Contao-Nutzer
    Registriert seit
    25.10.2019.
    Ort
    Hamburg
    Beiträge
    70

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •