How to prevent drop down menu parent link from 'firing' on mobile device ?

[c0deM0nK424]

here is the website im developing at present on my own test domain.

http://www.mktechsolutions.co.uk

the menu is css based and the website is responsive so to speak.


the logic is, that when viewed on desktops and large screens - you can hover your mouse over the drop down menu parent link , in our case 'Products & Services' and you have two options:


a) click the parent link itself, which will take you to products-services.html

b) alternatively you may not want to go to that page, and simply want to go to one of the pages in the drop down list - i.e packing, blending, filling or distribution - in which case you move your mouse to the respective drop down link and click it and it will open.


this works fine.


however the logic is flawed , well its not correct when we view the site on mobile devices (when the responsive menu is activated)

now when we move our finger towards products & services on a mobile device, it simply fails to open teh drop down links ( blending packing, filling dritribution) and instead it will open up the parent link (products & services ).


currently .dropdown li hover is set to display none for mobile devices which is what i want, but it doesnt sovle the issue.

advice ?

 

[c0deM0nK424]

ok so ive been thinking, to hell with 'css only solutions' - thats nonsense. CSS is not meant to solve all functionality , lower overheads or not.


im going to try using a mouseenter and mouseleave event in a jquery function which will say something like:


when the user mouse enters .dropdown (parent menu li) - DISPLAY THE DROP DOWN MENU LINKS - AND STOP THERE. THATS IT FREEZE.

if user mouse leaves the dropdown menu zone , and goes out side - it will close (display:none , or maybe just hide heh ).

so it remains 'open' the whole time, and if i wish to click the parent mneu li or one of the drop down li's then the corresponding page shold open.

in theory this should work right ?

point is - jQuery is the right way to solve this imo. of course there is the issue of solving this heh.

 

[1DMF]

Obviously the problem with mobile devices is there is no such thing as 'hover'.

So any menu that uses dropdowns on hover simply don't work.

I would do a browser sniff and detect a mobile device and auto show the dropdowns.

You may still be able to achieve this using CSS3 and media queries, though I don't have a problem using JQuery to solve things either.



"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music