Question

我设法把一个漂亮的菜单放到了一边！

<li class="huvudmenu"><a href="index.html">Framsida</a></li>
    <li class="huvudmenu">
    <a>Om oss</a>
    <ul>
      <li><a href="styrelsen.html">Styrelsen</a></li>
      <li><a href="historik.html">Historik</a></li>
      <li><a href="Stadgar.html">Stadgar</a></li>
      <li><a href="topeliuspriset.html">Topeliuspriset</a></li>
      <ul>
        <li><a href="#">HTML</a></li>
        <li><a href="#">CSS</a></li>
      </ul>
      </li>
    </ul>
    </li>
    <li class="huvudmenu"><a href="verksamhet.html">Verksamhet</a>
      <ul>
        <li><a href="#">Hangö seminariet</a></li>
        <li><a href="arsberattelser.html">Årsberättelser</a></li>

      </ul>
    </li>
    <li class="huvudmenu"><a href="estholmen.html">Estholmen</a></li>
    <li class="huvudmenu"><a href="blimedlem.html">Bli medlem</a></li>

`http://jsfiddle.net/hx6uvc19/我不熟悉的设置在触摸屏设备上运行良好。在使触摸屏兼容的同时，有什么方法可以保持设计？

谢谢！

Answer 1

您无法在移动设备上使用:hover伪类。为了获得这种效果，您可以在评论中使用@ jbutler483所述的JQuery。

如果你想这样做，你可以通过在click / touchstart上向主.active添加li类（通过使用类.huvudmenu）来添加此项你也有你的悬停样式的CSS。

这是JQuery：

$('.huvudmenu').on('click touchstart', function(e){
    e.preventDefault();
    $(this).toggleClass('active').siblings().removeClass('active');
});

和要添加的样式是：

nav ul li.active > ul {
    display: block;
}

和

nav ul li.active:after {
    width: 100%;
    background: #404040;
}

这将允许click和touchstart事件的样式。如果您希望这只能在移动设备上运行，您可以在初始化JQuery功能之前删除点击并使用touchstart事件和/或进行某种检测，这是一个移动设备。

以下是对小提琴的更新：http://jsfiddle.net/lee_gladding/hx6uvc19/3/

你能帮我把手机上的菜单搞定吗？

1 个答案: