用于可点击菜单和水平导航的 Javascript 或 css答案

【问题标题】：Javascript or css for clickable menu and horizontal nav用于可点击菜单和水平导航的 Javascript 或 css
【发布时间】：2016-12-26 08:35:30
【问题描述】：

我想制作一个不会自动显示的水平导航。我希望图像（？）是可点击的，以便菜单可以被它打开和关闭。

这是我目前拥有的代码。我把img放在li里了，因为布局的关系，不知道这样是不是正确的做法。

<header>
    <nav id="hoofdnavigatie">
        <ul>
            <li><a href="#"><img src="images/mobilebutton.png" alt="menu"/></a></li>
            <li><a class="active" href="index.html">Home</a></li>
            <li><a href="recept.html">Recept</a></li>
            <li><a href="bestel.html">Bestel</a></li>
            <li><a href="kok.html">Kok</a></li>
            <li><a href="contact.html">Contact</a></li>
        </ul>
    </nav>
</header>

点击菜单后

点击菜单前

【问题讨论】：

你尝试过什么 javascript 或 css？
我真的不知道如何开始，我不知道如何在互联网上搜索它，因为我不知道如何调用它。当我尝试搜索时，我只能找到诸如 JavaScript 下拉菜单之类的内容，但找不到我要查找的内容..
@LottePothé 我在下面添加了一个答案，检查一下，如果有用别忘了打勾。

标签： javascript html css nav

【解决方案1】：

您可以使用 js

做到这一点

document.getElementById("btn").addEventListener("click",function(){
    var k = document.getElementsByClassName("menu");
    for(i=0;i<k.length;i++){
        if(k[i].style.display == "none"){
           k[i].style.display = "inline-block";
          }  
            else{
                k[i].style.display = "none";
            }
    }
});

ul,li{
  list-style:none;
  margin-left:5px;
  margin-right:5px;
  }
li{
  display:inline-block;
  }
img{
  width:20px;
  height:20px;
  }
ul{
  background:green;
  border:2px solid #000;
  padding:10px;
  }
a {
    color: yellow;
    text-decoration: none;
}

a:hover 
{
     color:yellow; 
     text-decoration:none; 
     cursor:pointer;  
}
#btn{
  cursor:pointer;
  }

<header>
    <nav id="hoofdnavigatie">
        <ul>
            <li id="btn"><a href="#"><img  src="https://i.stack.imgur.com/EIYr8.jpg" alt="menu"/></a></li>
            <li class="menu"><a class="active" href="index.html">Home</a></li>
            <li class="menu"><a href="recept.html">Recept</a></li>
            <li class="menu"><a href="bestel.html">Bestel</a></li>
            <li class="menu"><a href="kok.html">Kok</a></li>
            <li class="menu"><a href="contact.html">Contact</a></li>
        </ul>
    </nav>
</header>

【讨论】：

【解决方案2】：

您可以使用 Javascript 来切换某些类并相应地将其应用到您的 CSS 中。

看看下面的sn-p：

$('.nav-opener').on('click', function() {
  $($(this)).toggleClass('open');
  $('nav').toggleClass('open');
});

.content-holder {
  display: flex;
  align-items: center;
}

nav {
  display: none;
}

nav.open {
  display: block;
}

.nav-opener {
  cursor: pointer;
  display: inline-block;
  border: 1px solid #777;
  padding: 8px;
}

.nav-opener.open {
  transform: rotate(90deg);
}

.nav-opener .bar {
  display: block;
  width: 15px;
  height: 2px;
  background: #777;
  margin-bottom: 4px;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

ul li {
  display: inline-block;
  padding: 0 10px;
}

.nav-opener .bar:last-child {
  margin-bottom: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content-holder">
  
  <div class="nav-opener">
    <span class="bar"></span>
    <span class="bar"></span>
    <span class="bar"></span>
  </div>
  <nav id="hoofdnavigatie">
          <ul>
              <li><a class="active" href="index.html">Home</a></li>
              <li><a href="recept.html">Recept</a></li>
              <li><a href="bestel.html">Bestel</a></li>
              <li><a href="kok.html">Kok</a></li>
              <li><a href="contact.html">Contact</a></li>
          </ul>
      </nav>
  
</div>

希望这会有所帮助！

【讨论】：