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你尝试过的JavaScript或CSS

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>

Answer 2

之前之后您可以使用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>

希望这有助于！