用于可点击菜单和水平导航的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

您可以使用Javascript来切换某些类＆amp;相应地将它应用到你的CSS中。

请看下面的代码段：

＆＃13;

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

希望这有帮助！

Answer 2

你可以使用 js

来做到这一点

＆＃13;

＆＃13;

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";
            }
    }
});

＆＃13;

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;
  }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;