2

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

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

谢谢

4

3 回答 3

2

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

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

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

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

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

于 2012-10-08T03:46:43.280 回答
1

下拉菜单可能很糟糕，尤其是让它们与触摸屏设备一起工作，因为你不能在触摸屏上“悬停”。这就是我做下拉菜单的方式，它是纯 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 友好。

你可以在我正在处理的这个网站上看到一个例子

于 2012-10-08T05:50:45.793 回答
0

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

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

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

于 2012-10-08T03:13:14.413 回答