Question

我刚刚建立了我的第一个响应式网站，但我面临一个问题，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"
        });
    }           
}

Answer 1

hover州不参与支持触控的设备。您必须在touch events中使用js或仅使用常规click事件。

Answer 2

问题在于你无法“悬停”在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/

Answer 3

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

的Seb

Answer 4

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

问题＆gt; Dropdown可以在Safari Mobile以外的所有浏览器中使用。

跟踪没有href元素的A标记的问题。这似乎只是Safari手机上的一个问题。如果没有href标记，则元素不会被视为可单击元素。

干杯！

CSS菜单无法在iPad / iPhone上运行

4 个答案: