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