CSS 导航菜单 iPad 和 iPhone答案

【问题标题】：CSS Navigation Menu IPad and IPhoneCSS 导航菜单 iPad 和 iPhone
【发布时间】：2012-10-08 03:04:55
【问题描述】：

我有一个在大多数桌面浏览器中运行良好的 css 菜单，但是我在让我的下拉菜单在 iPad 和 Iphone 上运行时遇到了问题。这是有问题的网站：http://bakersfield.kernhigh.org/

我对 css 和 javascript 很陌生，所以任何帮助都会很棒。

谢谢

【问题讨论】：

标签： iphone css ipad navigation navigationbar

【解决方案1】：

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

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

否则，你可以使用这个 jquery（你还必须包含 jQuery）：

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

这将在触摸时添加一个类（悬停），并在移除手指时将其移除。当然，您必须根据需要对其进行编辑。我之所以这么说，是因为您说您是 javascript 新手，我不想让您感到困惑。

【讨论】：

【解决方案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:none 对屏幕阅读器不友好，但是我总是在底部包含对屏幕阅读器友好的网站导航，并且对 SEO 也友好。

你可以在我正在开发的这个网站上看到这个例子here

【讨论】：

【解决方案3】：

一般来说，这样的下拉菜单通常不是移动网站的好习惯。这是因为您无法真正用手指将鼠标悬停在导航项目上，而且如果不放大菜单，按下项目可能会很困难。

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

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

【讨论】：