可點擊菜單和水平導航的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>