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 切换一些类并将其相应地应用到您的 CSS。

看看下面的代码片段：

$('.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>

希望对您有所帮助！

Answer 2

你可以使用 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>

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

Javascript or css for clickable menu and horizontal nav

html

javascript

css

nav