Virusscanner tips?
probleem met dropdownmenu op touchscreen
Hopelijk kan iemand me helpen. Ik heb een dropdownmenu gemaakt met alleen CSS zodat dit ook op een telefoon goed zou moeten werken. Na veel puzzelen dacht ik dat ik het werkend had en met :hover werkt het prima op de desktop, maar met de touchscreen doet het iets verkeerds.
De code heb ik op JSFiddle gezet: link naar JSFiddle
https://jsfiddle.net/jopla/hvLr2ey3/7/
Wat gebeurd er en waar gaat het fout:
Bij hover met een muis gaat het allemaal goed, maar met aanklikken gaat het fout.
Reproduceer met touch:
tik op de hamburger
tik op [HOME]
tik op [DROP2]
Bij de laatste keuze wordt link 2.3 (die op de plaats van [DROP2] komt) geopend in plaats van dat alleen met het hover effect de onderdelen van dat dropdownmenu (link 2.1 t/m link 2.3) zichtbaar worden gemaakt. Als ik met een muis hover is er geen enkel probleem.
Hoe kan dit? En hoe los ik dit op?
Dank voor een reactie.
Gewijzigd op 08/08/2018 11:47:11 door J opla
Mogelijk ontkom je er niet aan om wat JavaScript te gebruiken om de submenu's "sticky" te maken en dat deze alleen geopend en gesloten worden op afroep door een muisklik/tap in plaats van een hover-actie. De notie "hover" bestaat ook niet echt op mobiele devices, hier heb je geen echte muispointer.
Dank je voor je reactie en opmerkzaamheid. Bij het kopieren naar JSfiddle is er kennelijk iets fout gegaan, maar ik heb het gecorrigeerd, maar dat heeft geen effect helaas.
Inderdaad bestaat hover niet echt op mobile devices. Maar tap of tikken heeft meestal hetzelfde effect als hover, de rest werkt namelijk wel zo. Ik lees dat mobile devices iets met een dubbele tik doen, maar helemaal begrijpen doe ik dat niet. Maar klopt het?
Heeft iemand anders nog een suggestie?
Gewijzigd op 08/08/2018 13:40:05 door j opla