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

Question

我想制作一个不会自动显示的水平导航。我想要一个图像(？)是可点击的，这样菜单就可以通过它打开和关闭。

这是我目前拥有的代码。我已将 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>

点击菜单后

点击菜单前

Answer 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="/image/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>