probleem met dropdownmenu op touchscreen

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Innovatieve, nauwkeurige Senior PHP Developer voor

Eind jaren ’90 is dit bedrijf opgericht. Ze hebben zich altijd beziggehouden met het ontwikkelen van software voor overheidsinstanties. Dit zijn instanties waaronder bijvoorbeeld ook onder andere : de belastingdienst, burgerszaken, verschillende bedrijven, notarissen, incassobureau’s en ook nog bewindvoerders. Momenteel tellen ze 20 medewerkers, waarvan 2/3 deel allemaal developers zijn. Doordat ze de enigste aanbieder van dit soort software op de markt zijn, groeien ze erg hard. Door de enorme groei, hebben ze dan ook concrete groeiplannen in het verschiet. Functie-omschrijving Het bedrijf wordt door allerlei instanties ingeschakeld. Tegenwoordig wordt alles digitaal geregeld en gezien de essentie van dit soort

Bekijk vacature »

J opla

j opla

08/08/2018 11:18:16
Quote Anchor link
Beste mensen,

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
 
PHP hulp

PHP hulp

17/08/2018 01:56:36
 
Thomas van den Heuvel

Thomas van den Heuvel

08/08/2018 13:21:41
Quote Anchor link
Je mist in ieder geval een afsluitende div. Incorrecte HTML draagt zelden tot nooit bij aan correct gedrag.

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.
 
J opla

j opla

08/08/2018 13:33:07
Quote Anchor link
Beste Thomas,

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
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.