0

我最近开始从事网页设计，但我绝不是专家。我正在为自己开发这个网站，我似乎遇到了一些问题。这个网站在所有浏览器上看起来都差不多（它仍在开发中），我一直在研究平板电脑和手机特定的 css。在对 iPad 进行测试时（我使用 xCode iOS Sim），我注意到我的菜单栏无法正常工作，除非在看似随机的时刻（通常是在我放大时）。我让一位家庭成员在他们的物理 iPad 上对此进行了测试，但他们根本无法使用导航栏。此jsFiddle链接包含运行导航栏的 html 和 css。我将在接下来的几个小时内进行此工作，如果我想通了，我会更新或删除这篇文章，但如果我不这样做，我们将不胜感激。

这只是html，css太长了。

<h2><a href="/">Auburn PC Repair<br>& Building</a></h2>
<div id="header-image">
    <h1></h1>
</div>

<nav id="buttonbar">
    <ul>
        <li id="services-button"><div class="buttonHighlight"></div>
            <a href="#" class="button"><h3>Our Services</h3><p>how can we help you</p></a>
            <ul>
                <li><a href="/services/pcrepair">PC Repair</a></li>
                <li><a href="/services/mobiledev">Mobile Device</a></li>
                <li><a href="/services/networking">Networking</a></li>
                <li><a href="/services/pcbuilding">PC Building</a></li>
            </ul>
        </li>
        <li id="contact-button"><div class="buttonHighlight"></div>
            <a href="/contact" class="button"><h3>Contact Us</h3><p>phone and email</p></a>
        </li>
        <li id="about-button"><div class="buttonHighlight"></div>
            <a href="/about" class="button"><h3>About Us</h3><p>all about us</p></a>
        </li>
    </ul>
</nav>

编辑：导航栏是围绕 www.panic.com/coda navbar 设计的。它在 iPad 上运行良好。编辑：当前设置适用于所有非 iOS 设备。

4

1 回答 1

0

您的导航依赖于悬停事件来触发菜单内容的出现。

鼠标移动到元素上会触发悬停事件。

触摸设备，例如所有 iOS 设备，以及大多数（如果不是全部）现代智能手机和平板电脑，都没有鼠标，因此无法触发悬停事件。

您无法仅使用 CSS 在现代触控设备上实现您想要的。

可以使用 JavaScript 触发和响应各种与触摸相关的事件。您将需要不选择基于 CSS 的菜单触发方法，而是使用基于 JavaScript 的方法，其中处理悬停和触摸事件以生成所需的菜单系统。

于 2013-03-12T12:29:48.813 回答