CSS 菜单在 iPad / iPhone 上不起作用答案

【问题标题】：CSS Menu not working on iPad / iPhoneCSS 菜单在 iPad / iPhone 上不起作用
【发布时间】：2014-07-15 20:08:01
【问题描述】：

我刚刚建立了我的第一个响应式网站，但我面临一个问题，CSS 下拉菜单适用于 android 和 Chrome 的仿真，但不适用于 iPhone 或 iPad 上的 safari。这是a link to a working copy，这里是代码：

HTML

<nav role="navigation" id="top-nav" class="floatRight">
    <div class="nav top-nav cf">
        <ul>
            <li class="page_item page-item-25 current_page_item"><a href="http://phily245.me.uk/gibson/">Home</a></li>
            <li class="page_item page-item-35"><a href="http://phily245.me.uk/gibson/contact/">Contact Us Now</a></li>
            <li class="page_item page-item-37"><a href="http://phily245.me.uk/gibson/services/">Services</a></li>
            <li class="page_item page-item-41"><a href="http://phily245.me.uk/gibson/gallery/">Gallery</a></li>
        </ul>
    </div>
</nav>

CSS

#top-nav {
    margin-top: 60px;
    z-index:200;
}

#top-nav li {
    float: left;
    background-image: none;
    padding-left: 0;
}

#top-nav li a {
    font-size: 14px;
    padding: 8px 12px;
    color: #797f94;
    display: block;
}

#top-nav li:hover {
    background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0, #2AA6FF),
    color-stop(1, #1E8AD7)
    );
    background-image: -o-linear-gradient(bottom, #2AA6FF 0%, #1E8AD7 100%);
    background-image: -moz-linear-gradient(bottom, #2AA6FF 0%, #1E8AD7 100%);
    background-image: -webkit-linear-gradient(bottom, #2AA6FF 0%, #1E8AD7 100%);
    background-image: -ms-linear-gradient(bottom, #2AA6FF 0%, #1E8AD7 100%);
    background-image: linear-gradient(to bottom, #2AA6FF 0%, #1E8AD7 100%);
    border-radius: 5px;
}

#top-nav li:hover a {
    color: #ffffff;
    text-decoration: none;
}

/* ==========================================================================
Tablet changes
========================================================================== */

@media screen and (min-width: 640px) and (max-width: 1024px)  {  

#top-nav {
    width: 70px;
    border-radius: 3px;
    position: absolute;
    right: 20px;
    z-index: 300;
}

#top-nav::before {
    content: "Menu";
}   

#top-nav ul {
    width: 100%;
}

#top-nav::before:hover div, #top-nav::before:focus div, #top-nav:hover div, #top-nav:focus div {
    z-index: 400;
    display: block;
}

#top-nav li {
    background-image: none;
    position: relative;
}

#top-nav li:hover {
    background-image: none;
}

}


/* ==========================================================================
Tablet & mobile changes
========================================================================== */

@media screen and (max-width: 1024px) {

#top-nav {
    padding: 8px 12px;
    background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0, #2AA6FF),
    color-stop(1, #1E8AD7)
    );
    background-image: -o-linear-gradient(bottom, #2AA6FF 0%, #1E8AD7 100%);
    background-image: -moz-linear-gradient(bottom, #2AA6FF 0%, #1E8AD7 100%);
    background-image: -webkit-linear-gradient(bottom, #2AA6FF 0%, #1E8AD7 100%);
    background-image: -ms-linear-gradient(bottom, #2AA6FF 0%, #1E8AD7 100%);
    background-image: linear-gradient(to bottom, #2AA6FF 0%, #1E8AD7 100%);
}

#top-nav li a {
    color: #ffffff;
}

#top-nav::before {
    color: #ffffff;
    background-image: url(../images/menu.gif);
    background-position: 0% 3px;
    background-repeat: no-repeat;
    padding-left: 29px;
}

#top-nav li:hover a {
    color: #ffffff;
    text-decoration: underline;
}

#top-nav div {
    display: none;
}

#top-nav:hover div {
    /*position: absolute;*/
}

#top-nav:hover {
    height: 210px;
}

}

/* ==========================================================================
Mobile changes
========================================================================== */

@media screen and (max-width: 639px) {

#top-nav {
    margin-top: 0;
    overflow: hidden;
    float: none;
}

#top-nav::before {
    content: "J Gibson Electrical";
    font-family: segoe-script, "Comic Sans MS", cursive, sans-serif;
    font-weight: bold;
}

#top-nav ul {
    width: 100%;
}

#top-nav li {
    clear: left;
}

#top-nav:hover div {
display: block;
}

#top-nav li:hover, #top-nav li:focus  {
background-image: none;
}

}

解决方案

正如公认的答案所说，JavaScript 是解决方案。这是我的解决方案：

//This goes in an onload or onresize event
if(viewportWidth <= 1024)
    $("#top-nav").click( function() {
        toggleMenu();
    });
}

function toggleMenu()
{

    menuItems = $("#top-nav div");
    if(menuItems.css("display") == "none")
    {
        menuItems.css({
            "display": "block"
        });
    }
    else
    {
        menuItems.css({
            "display": "none"
        });
        $("#top-nav").css({
            "height": "auto"
        });
    }           
}

【问题讨论】：

标签： ios iphone css mobile-safari

【解决方案1】：

问题在于您不能在 iPad 上“悬停”，您必须使用 js onclick 事件和样式来使它们在点击时下拉。这里有一些链接可能对https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent http://www.w3schools.com/jsref/prop_style_width.asp有帮助

我遇到了同样的问题，我决定使用幻灯片菜单http://tympanus.net/codrops/2013/04/17/slide-and-push-menus/

【讨论】：

【解决方案2】：

hover 状态不适用于支持触控的设备。您必须在 js 中使用 touch events 或只是常规的 click 事件。

【讨论】：

【解决方案3】：

你好菲尔你需要使用其他伪选择器检查以下stackoverflow帖子:touch CSS pseudo-class or something similar?

Seb

【讨论】：

【解决方案4】：

发现了一个与此主题相关的不同问题，我认为我会发布以供将来参考。

ISSUE > Dropdown 在除 Safari Mobile 之外的所有浏览器中均有效。

将问题跟踪到没有 href 元素的 A 标记。这似乎只是 Safari 移动设备上的问题。如果没有 href 标记，则该元素不会被视为可点击元素。

干杯！

【讨论】：