CSS导航菜单IPad和IPhone

我有一个css菜单，在大多数桌面浏览器中都能正常工作，但我遇到了问题，我的下拉菜单可用于iPad和Iphone。这里是有问题的网站：http://bakersfield.kernhigh.org/CSS导航菜单IPad和IPhone

我是相当新的CSS和JavaScript，所以任何帮助将是伟大的。

谢谢

来源

2012-10-08 user1604254

一般来说，这样的下拉菜单通常不适用于移动网站。这是因为您无法用手指真正悬停在导航项目上，并且在没有放大菜单的情况下按下某个项目可能会很困难。

在移动设备上查看时，解决方案具有不同的CSS样式以供导航。下面是帮助您将您的导航更加适合移动设备的重要资源：

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

来源

2012-10-08 03:13:14 phoffman

目前，iOS不支持:hover，使您的导航功能就无法在iOS中展开，因为它做了桌面上。

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

否则，你可以使用这个jQuery（你还必须包括jQuery的当时）：

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

这将在触摸加个班（悬停），并删除它在去除手指。您当然必须根据您的需要进行编辑。我只是这样说，因为你说你是JavaScript新手，我不想混淆你。

来源

2012-10-08 03:46:43 ndugger

下拉菜单可能会吸吮，特别是使它们与触摸屏设备一起工作，因为您无法将其悬停在触摸屏上。这是我如何做下拉菜单，它是纯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; 
}

背后所有这一切的想法是创建一个列表，那么其他名单内创建下拉元素....

然后，从它e，只显示开始的主要列表项目，然后显示悬停时的下拉菜单（或者在移动设备点击的情况下，通过使主列表项目链接到“＃”，从而创建和主动/悬停状态）...

唯一的问题是，通过使用显示器：没有它不是屏幕阅读器友好，但我总是包括网站导航在屏幕阅读器友好的底部和SEO友好以及。

你可以在这个网站上看到这个实例在我的工作here

来源

2012-10-08 05:50:45

CSS导航菜单IPad和IPhone

回答

相关问题