HTML & CSS
I have used some CSS code that to develop a dropdown menu for a navigation bar. The CSS works great on a desktop, but fails on an iPhone or iPad due to the fact that those devices disable the hover pseudo class (http://stackoverflow.com/questions/2741816/is-it-possible-to-force-ignore-the-hover-pseudoclass-for-iphone-ipad-users).
So I have disabled the link on the actual button that displays the dropdown when hovered over, and simply added a new dropdown list item in the first slot that reads "overview" and goes to the same page that the button itself took you to.
I have found a site that operates in a desired fashion at [MonsterFollowUp.com. When you view the site on an iPhone, the "Support" dropdown button when clicked on displays the dropdown menu and when you click again on the "Support" button it goes to [url=http://www2.monsterfollowup.com/support/]MonsterFollowUp.com » Support](http://www2.monsterfollowup.com/).
Is it possible to alter the CSS on the site I am working on at Home » Anderson Media Corporation so that it would function like the Monster Follow Up site?
but fails on an iPhone or iPad due to the fact that those devices disable the hover pseudo class
But I'll bet you can also look up TouchEvents, something Apple's been working on I guess.
This page may already be out of date.
Touch events on Android.
I'm not sure if Monster's jQuery has touch stuff in there, or if they just went with their own thing... I did see a lot of browser detection in the Superfish script, so who knows, they may be specifically checking for iWhatevers.
It's a technique that aims to cut down on hover animations. Basically if you move your mouse from point a to point b and the drop down menu happens to be somewhere along the path so you touch it briefly, it won't start the animation. Only when your an element for some time (something like 100ms or so probably) will it start to animate. That looks cleaner.
hoverintent is a jquery plugin that applies "intention" to the mouse movement. If you mouse over a dropdown menu by accident it won't suddenly fly out. You need to move to the menu "with intent" i.e. slowdown as you approach the menu so that it looks like you are really interested in using it.
It's cleverer than a simple delay and is supposed to make the menu more usable as you don't trigger the menu by accident all the time as with normal dropdowns.
Remon got in there first
When I view that monsterFollowUp.com site on my iphone emulator it shows a completely different site with no drop downs and a simplified layout. If I use the option to load the regular site then their dropdowns seem to work the same as yours.
You have to click/touch to activate them and then they show. You just can't get rid of them.
If you want to support the iphone then I would suggest using media queries and give it a redesigned (non dropdown) menu.
This topic is now closed. New replies are no longer allowed.