CSS Dynamic Navigation with Hover - How Do I make it work in iOS Safari?

Question

In my site I use a CSS only dynamic menu. This is fine in desktop browsers, but not on iOS (iphone, ipad, etc) because the touch interface does not support the :hover

Answer 1

Check this article, perhaps it's a solution for you ;)

http://www.usabilitypost.com/2010/05/12/css-hover-controls-on-iphone/

Also JS solution, taken from: http://www.evotech.net/blog/2008/12/hover-pseudoclass-for-the-iphone/

var nav = document.getElementById('nav');
var els= nav.getElementsByTagName('li');
for(var i = 0; i < els.length; i++){
    els[i].addEventListener('touchstart', function(){this.className = "hover";}, false);
    els[i].addEventListener('touchend', function(){this.className = "";}, false);
}

In jQuery:

$('#nav li').bind('touchstart', function(){
    $(this).addClass('hover');
}).bind('touchend', function(){
    $(this).removeClass('hover');
});

css:

li:hover, li.hover { /* whatever your hover effect is */ }