移动导航 - 触摸不激活

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。

编辑我已将悬停更改为活动状态并将 ontouchstart="" 添加到 body 标签。结果是菜单现在已激活，但不会保持足够长的时间让您 select 一个 link。

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;}
}

移动导航 - 触摸不激活

Mobile navigation - Not activating on touch

html

css

mobile

responsive-design