Question

我正在尝试通过移动设备访问我的网站并将其排列在一定大小以下，顶部的菜单栏变为下拉列表。不幸的是它适用于悬停，因此当我尝试在我的手机上使用它时根本没有任何事情发生。任何人都可以建议我如何改变代码以使其与触摸一起工作？

HTML

<nav id="nav_mobile" role="navigation">
    <ul>
        <li><a href="#" id="current">Home</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">Gallery</a></li>
    </ul>
</nav>

CSS

#nav_mobile {
    position: relative;
    padding-top: 2%;
    margin: 0px auto;
}   
#nav_mobile ul {
    width: 100%;
    text-align: center;
    position: absolute;
    background: #F8F8F8;
    min-height: 50px;
    background-image: url('../img/Menu_button.png');
    background-repeat: no-repeat;
    background-position: 50% 0%;
}
#nav_mobile li {
    display: none;
    margin: 0;
    border-bottom: 1px solid #ceced6;
    background: #070707;
}
#nav_mobile #current {
    display: block;
}
#nav_mobile a {
    display: block;
}
#nav_mobile #current a {
    background: none;
    color: #666;
}
#nav_mobile ul:hover {
    background-image: none;
}
#nav_mobile ul:hover li {
    display: block;
}

如果我需要，可以在代码中包含jQuery，但如果可以的话，我想将它保留在css中。

EDIT 我已将悬停更改为活动状态，并将ontouchstart =“”添加到body标签中。结果是menue现在激活，但是不能保持活动足够长的时间来选择链接。

Answer 1

使用:active pseudoclass.它应该可以使用，但在某些浏览器中，您需要一个小的黑客来使其工作：将事件处理程序附加到正文上的touchstart事件(ex:<body ontouchstart="">)

Answer 2

您可以创建2个单独的菜单 - 一个用于常规屏幕，另一个用于移动设备，并执行以下操作：

#nav_mobile {display: none;}

@media (max-width: 480px) {
  #nav_mobile {display: inline-block;}
  #nav_regular {display: none;}
}

移动导航 - 触摸时不激活

2 个答案: