CSS导航菜单IPad和IPhone

Question

我有一个css菜单，在大多数桌面浏览器中都能很好地工作，但我在IPad和Iphone上使用下拉菜单时遇到了问题。以下是有问题的网站：http://bakersfield.kernhigh.org/

我是css和javascript的新手，所以任何帮助都会很棒。

感谢

Answer 1

目前，iOS不支持:hover，因此您的导航不会像在桌面上那样在iOS中展开。

你考虑过jQuery Mobile吗？不过，我只建议你开发一个单独的移动版本。

否则，您可以使用这个jquery(然后还必须包含jquery)：

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

这将在触摸时添加一个类(悬停)，并在移除手指时将其移除。当然，您必须根据需要对其进行编辑。我这么说只是因为你说你是javascript新手，而我不这么认为；I don’我不想把你弄糊涂。

Answer 2

下拉菜单可能很糟糕，尤其是让它们与触摸屏设备配合使用，因为你不能在触摸屏上"悬停"。这就是我的下拉菜单，它是纯CSS，我已经在chrome、ff、ie7+、safari、iPhone和多个Android上测试过了(当然，你会想调整颜色和大小)：

HTML

<div id="navigation">
<ul id="nav">
<li><a href="index.html>Home</a></li>
<li><a href="#">Drop Down</a> <!--Notice didn't close the li yet->
<ul>
<li><a href="link">Drop Down Item</a></li>
<li...../li>
etc...
</ul>
</li>
<li><a href="#">Another Drop Down</a></li>
<ul>
...
</ul
</li>
</ul>
</div>

CSS：

#nav {
display: block;
text-align: center;
font-size: 1em;
position: relative;
height: 3em;
width: 950px;
margin-right: auto;
margin-left: auto;
list-style-type: none;
}
#nav li {
float: left;
display: block;
width: 75px;
height: 3em;
position: relative;
}
#nav li a {
text-decoration: none;
display: block;
height: 1em;
padding-top: 1em;
padding-bottom: 1em;
}
#nav li a:hover {
color: #990000;
background-color: #999999;
}
#nav li ul  {
width: 100%;
display: none;
z-index: 9999;
position: absolute;
}
#nav li ul li {
display: block;
clear: both;
width: 100%;
height: 100%;
background-color: #B5BDC8;
}
#nav li:hover ul  {
display: block;
}

所有这些背后的想法是创建一个列表，然后在其他列表中创建下拉元素。。。。

然后，从那里开始，只显示主列表项，然后在悬停时显示下拉菜单(或者在移动设备单击的情况下，通过使主列表项链接到"#"，从而创建活动/悬停状态)。。。

唯一的问题是使用display：没有，它对屏幕阅读器不友好，但我总是在底部包含对屏幕阅读器友好的网站导航，也对SEO友好。

你可以在这个网站上看到一个例子，我在这里工作

Answer 3

一般来说，这样的下拉菜单对于移动网站来说通常不是很好的做法。这是因为你不能用手指真正悬停在导航项目上，如果不放大菜单，按下项目可能会很困难。

一种解决方案是在移动设备上查看时，为您的导航提供不同的CSS样式。这里有一个很好的资源，可以帮助您将导航转换为更便于移动：

http://css-tricks.com/convert-menu-to-dropdown/