Click here to Skip to main content
14,114,975 members
Rate this:
Please Sign up or sign in to vote.
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

Rate this: bad
Please Sign up or sign in to vote.

Solution 1

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

  Print Answers RSS
Top Experts
Last 24hrsThis month

Advertise | Privacy | Cookies | Terms of Service
Web03 | 2.8.190518.1 | Last Updated 17 Jun 2015
Copyright © CodeProject, 1999-2019
All Rights Reserved.
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100