I found this slightly old, but excellent tut on CSS-Tricks yesterday (http://css-tricks.com/color-fading-menu-with-jquery/) and had no problems building it into my site – it works fantastic on all desktop browsers, but I have a problem when navigating my site on the iPhone or iPad.
Because these are touch devices they don’t do rollovers or rollouts :-( So every time I click on one of the buttons, it plays the fade in effect, I then have to click the same button again to actually go to the linked page.
Does anyone have ANY ideas how to make it work on click on an iDevice?
Thanks in advance for any suggestions – I am a bit of a newbie to JQuery, so please be gentle on the technical stuff :-)
Well the real question is how do you want it to work? You’re saying that when you effectively “hover” (initial quick click) on mobile devices that it runs the fade effect, then you have to click again to go to the link. So, if you don’t want to have to click twice to visit the link then when do you want the effect to run? You want the effect to run AND to go to the link all on one click?
You could get that to work by capturing the href value of the link, then when you “hover” on the link it runs the fade effect, when the fade effect is finished you send the user to the href value that you stored for that link.
But I think I’m asking too much. So I think I will create a mobile (touch) version of the site, without any rollover effects) and have some script to detect what device the visitor is using and redirect.