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开发者网络（link）或访问jQuery API页面（link），你可以非常快速地掌握基础知识。只有当你开始跳跃到可以做到的一切的深度时，它才开始变得困难。

希望这有助于家伙。

Answer 2

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

#nav:hover ul {display:block;}

每当您将导航拖到任何地方时，子菜单都会出现。而不是CSS使用javascript / jQuery使其出现在点击。

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

尽管上面的代码并不完全符合您的要求，因为子菜单将永远保留。这将帮助您自己找到解决方案;）。编码正在进行中。

Navbar悬停以响应（navicon菜单）

2 个答案: