CSS3下拉菜单和iOS问题

我正在尝试使用一些CSS3转换做出下拉导航菜单。但是，当使用隐藏/可见性时，iOS不会显示下拉菜单（它只是转到链接）。如果我使用display none/block，iOS会在父元素第一次点击时显示下拉菜单，但这些转换在任何浏览器中都不起作用。CSS3下拉菜单和iOS问题

有没有办法让这些转换在浏览器中正常运行，并且下拉菜单在iOS中不使用javascript？

降下来不会在iOS中工作：

nav ul li ul { 
    position: absolute; visibility: hidden; opacity: 0; left: 0; top: 50px; z-index: 99; 
    -webkit-transition: all .35s ease-in-out; 
    -moz-transition: all .25s ease-in-out; 
    -o-transition: all .35s ease-in-out; 
    -ms-transition: all .35s ease-in-out; 
    transition: all .35s ease-in-out; 
} 
nav ul li:hover > ul { visibility: visible; opacity: 1; top: 40px; }

转变不会在浏览器中工作：

nav ul li ul { 
    position: absolute; display: none; opacity: 0; left: 0; top: 50px; z-index: 99; 
    -webkit-transition: opacity .35s ease-in-out, top .35s ease-in-out; 
    -moz-transition: opacity .35s ease-in-out, top .35s ease-in-out; 
    -o-transition: opacity .35s ease-in-out, top .35s ease-in-out; 
    -ms-transition: opacity .35s ease-in-out, top .35s ease-in-out; 
    transition: opacity .35s ease-in-out, top .35s ease-in-out; 
} 
nav ul li:hover > ul { display: block; opacity: 1; top: 40px; }

来源

2012-04-18 csm232s

iOS版意味着Mobile Safari？你为什么试图依靠：悬停触摸设备（这是不可预知的）？我发现你不想使用JS，但它可以让你事件更精确。在我看来，你应该使用一个Javascript单击事件来显示和隐藏事件，并通过event.preventDefault（）来禁止链接操作。 – 2012-04-18 23:27:20

想着这之后一些我发现的文档，我从来没有见过之前 - 你遇到的一些古怪可能是因为你将行为附加到默认情况下不是交互式的某个伪元素上（只有锚点和表单元素是可点击的）。

http://sitr.us/2011/07/28/how-mobile-safari-emulates-mouse-events.html

（忽略我原来的约event.preventDefault评论...我忘了你，用列表项工作锚代替。）

，不过我仍然认为JS是最好的方法因为你可以对任何类型元素附加的事件进行非常具体的描述。您可以应用CSS类，它将使用您已经指定的过渡属性。

像这样：

// CSS 
nav ul li > ul.visible { display: block; opacity: 1; top: 40px; } 

// JS 
// you could bind mouseover/out here too if you want it to work on both desktop & mobile 
$('nav ul li').bind('click', function(){ 
    $(this).children('ul').toggleClass('visible'); 
});

如果你想成为额外的真棒，你可以把它的键盘加入tabIndex="0"到列表中的项目:)

来源

2012-04-18 23:51:02

我找到了一个解决方案访问。从本质上讲，ios不会将点击绑定到悬停以显示任何内容：block/none或visibility：hidden/visible。所以你需要使用“左”来“隐藏”下拉菜单来补偿不支持不透明度的< = ie8。

所以基本上用你的第二个例子用的小调整：

nav ul li ul { 
    position: absolute; opacity: 0; left: -888em; top: 50px; z-index: 99; 
    -webkit-transition: opacity .35s ease-in-out, top .35s ease-in-out; 
    -moz-transition: opacity .35s ease-in-out, top .35s ease-in-out; 
    -o-transition: opacity .35s ease-in-out, top .35s ease-in-out; 
    -ms-transition: opacity .35s ease-in-out, top .35s ease-in-out; 
    transition: opacity .35s ease-in-out, top .35s ease-in-out; 
} 
nav ul li:hover > ul {opacity: 1; top: 40px; left:0;}

然后就一定不要使用“一切”在您的转换或将动画左属性以及:) 唯一的问题用这种方法是，你的转换只会在不出路的路上工作。

来源

2012-04-25 04:22:46 Jesse

CSS3下拉菜单和iOS问题

回答

相关问题