Click here to Skip to main content
15,921,530 members
Please Sign up or sign in to vote.
5.00/5 (3 votes)
See more:
On we use CSS :hover pseudo-class on A tags for menu dropdowns. It's fast, it requires no script execution to set up, and it works when Javascript isn't enabled or available.

However, for mobile devices and pads that use a touchscreen there is no mouse over or hover event so this design fails.

What's a good alternative to this that doesn't rely on Javascript?

1. Simply not show menus and just have links that go to pages that have the options that would have appeared in the menu dropdown?

2. Use the :active pseudo-class and work out how to make the link reference a bookmark on the page instead of an off-page link?

3. Use a SELECT control with OPTIONs for each item in the menu. Some mobile devices have excellent support for these.

4. Liquid Nitrogen?
Updated 16-Mar-11 4:08am
OriginalGriff 16-Mar-11 10:01am    
I'm in two minds here: I really like the feature on my desktop, but on the mobile there really isn't a lot of screen real estate, so anything which did manage to do this would probably be a PITA in practice. I'd be tempted by just links to option pages, to be honest - it may be slower to navigate, but I tend to set bookmarks to the various fora anyway, so once I'm there it doesn't matter again.

1 solution

OnFingerHover? :)

I think I'd go with option 3, except you made it a point to say "some" devices, as if to say *some* device DON'T have suppport (or excellent support) for it.

BTW, Liquid Nitrogen is in short supply because of the Tsunami in Japan.
Share this answer
Chris Maunder 16-Mar-11 11:13am    
*cough* blackberry *cough*
Yusuf 16-Mar-11 11:42am    
Ok which finger are we talking about :-)
Sergey Alexandrovich Kryukov 16-Mar-11 21:59pm    
Hovering middle finger detected!

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900