CSS动态导航与悬停 - 如何使它在iOS Safari中工作？ [英] CSS Dynamic Navigation with Hover - How Do I make it work in iOS Safari?

问题描述

在我的网站中，我使用CSS仅动态菜单。这在桌面浏览器，但不是在iOS（iphone，ipad等），因为触摸界面不支持：hover 选择器。

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

我的问题是：在iOS上支持这个的最好的方法是什么？ （理想情况下，通过修补一些CSS，或Javascript，将使现有的代码工作，而不是做的整个只是为了支持iOS）

My question is: what is the best way of supporting this on iOS? (Ideally either by patching with some CSS, or Javascript that will make the existing code work, rather than doing the whole thing over just to support iOS)

我的html看起来像

<ul id="nav"> 
  <li> 
     Item 1
     <ul> 
       <li><a href=''>sub nav 1.1</a></li>
       <li><a href=''>sub nav 1.2</a></li>
     </ul> 
  </li> 
  <li> 
     Item 2
     <ul> 
       <li><a href=''>sub nav 2.1</a></li>
       <li><a href=''>sub nav 2.2</a></li>
     </ul> 
  </li> 
  <li> 
     Item 3 
     <ul> 
        <li><a href=''>sub nav 3.1</a></li>
        <li><a href=''>sub nav 3.2</a></li>
    </ul> 
  </li> 
</ul> ​​​​​

CSS是这个

#nav li {
    float:left;
    padding:0 15px;
}

#nav li ul {
    position: absolute;
    width: 10em;
    left: -999em;
    margin-left: -10px;
}

#nav li:hover ul {
    left: auto;
}

我在这里做了一个jsfiddle： http://jsfiddle.net/NuTz4/

推荐答案

查看这篇文章，也许这是一个解决方案;）

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

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

也是JS解决方案，取自： http://www.evotech.net/blog/2008/12/hover-pseudoclass-for-the-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);
}

在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 */ }

这篇关于CSS动态导航与悬停 - 如何使它在iOS Safari中工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！