导航栏悬停响应（导航菜单）

Question

如何在手机中单击导航图标（而不是将鼠标悬停），它将显示一个带有链接的小容器。 这是我的编码。

HTML

<div id="nav">
   <ul class="menu">
      <li> <a class="#"> LINK </a> </li>
      <li> <a class="#"> LINK </a> </li>
      <li> <a class="#"> LINK </a> </li>
      <li> <a class="#"> LINK </a> </li>
   </ul>
   <a href="#" id="nav-icon"> <img src="nav.png"> </a>

   <div class="navimage">
      <a href="#"> <img src="twitter.png"> </a>
      <a href="#"> <img src="facebook.png"> </a>
   </div>
</div>

CSS

#nav {
    height:70px;
    border-bottom:1px solid #FFF;
    margin-bottom:20px;
    padding:0;
    max-width:95%;
    margin:0 auto;
}

#nav-icon img {
    display:none;   
}

.menu {
    float:left;
    width:70%;
    margin:0 auto;
}

.menu li {
    display:inline;
}

.menu a {
    padding:15px;
    margin:15px 0;
    display:inline-block;
    text-align:center;
}

.menu a:hover {
    color:#DEB887;
}

#nav a:hover {
    text-decoration:none;
}

.navimage {
    float:right;
    margin:20px 0;
    width:30%;
}

.navimage img {
    width:30px;
    height:30px;
    margin:0 2px;
    border-radius:50%;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    -ms-border-radius:50%;
    -o-border-radius:50%;
    float:right;
}

响应式CSS

@media only screen and (min-width: 480px) and (max-width: 764px) {

#nav-icon img {display:inline-block;height:40px;margin-top:10px;margin-left:10px;cursor:pointer;}
#nav ul, #nav:active ul {
    display:none;
    position:absolute;
    padding:15px;
    background:#fff;
    border: 3px solid #DEB887;
    left:30px;
    top:50px;
    width:30%;
    border-radius:0 0 3px 3px;
    z-index:9999;
}
#nav:hover ul {display:block;}
#nav ul li a {width:100%;color:#000;padding:0;margin:10px 0;}
#nav ul li a:hover {color:#DEB887;}
}

这是JSFIDDLE签出。 问题是我将导航div悬停在各处，并且显示菜单。 我想要的是单击导航图标，它将出现在菜单上？ 有任何想法吗？

谢谢

Answer 1

您需要少量的jQuery，这意味着在您的头中包含库，并且在头中也包含一小段脚本。

首先将其添加到头部：

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

它将为您加载最新版本的jQuery。

接下来，您需要添加jQuery代码以使导航正常运行。 它是一个简单的3行代码，用于检查其是否被单击，然后切换显示状态。

<script type="text/javascript">
$(document).ready(function() {
    $('#nav-icon').click(function() {
        $('ul.menu').toggle();    
    });
});
</script>

如您所见，它会找到id nav-icon，并在单击它时运行一个功能来切换ul.menu的可见性。

jsFiddle演示： http : //jsfiddle.net/3w63B/2/

如果您进入mozilla开发人员网络（ 链接 ）或进入jQuery API页面（ 链接 ），则可以快速掌握基础知识。 当您开始跳入所有功能的底端时，它才开始变得困难。

希望这可以帮助家伙。

Answer 2

您认为这行代码有什么作用？

#nav:hover ul {display:block;}

每当您将导航栏悬停在子菜单出现的任何位置时 。 代替CSS，请使用javascript / jQuery，使其在点击时显示。

$("#nav-icon").on("click", function() {
    $(".menu").css("display","block");
});

尽管上面的代码并不是您想要的，因为子菜单将永远存在。 这将帮助您自己找到解决方案;）。 编码正在执行。