INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

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

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

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

(OP)
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 ?

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

(OP)
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.


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

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

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close