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.
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
Disabled? How do you “hover” on an iWhatever? You either touch it or you don’t. It seems that’s what MonsterFU did: they used click events with Javascript, while CSS does the :hover events (though, with Javascript off, their hover is horribly broken… I can’t actually select anything in their dropdown). In the source they have Superfish.js which mentions something called “hoverIntent” but I don’t know what that is.
But I’ll bet you can also look up TouchEvents, something Apple’s been working on I guess.
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.
Edit:
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.
