如何将悬停导航转换为可点击/切换？

Question

我创建了一个带有navicon的页面。当我将鼠标悬停在导航图标上时，它会显示水平排列的菜单。我希望navicon可以点击/切换。

Answer 1

你需要胡佛胡佛

可能是https://stackoverflow.com/questions/14041207/how-to-disable-on-hover-effects-of-a-link的重复，或者至少你可以在那里获得信息。

例如

a:hover {
 text-decoration:none;
}

然后你需要添加一个点击事件

onclick="yourFunction"

Answer 2

您需要使用jQuery或JS。

这是一个JQuery版本：http://jsfiddle.net/czdn6nmd/4/

编辑：要确保菜单再次显示在桌面上，您应该切换课程：

刚刚更改了导航中ul的移动版本，最初显示为none，阻止活动状态。

nav ul {
    display: none;
}
nav ul.active {
    display: block;
}

然后添加了切换JQuery：

$("#menu-icon").on("click", function(){
    $(this).siblings("ul").toggleClass("active");
});