Impossible de fermer le menu de superposition en utilisant JavaScript, si je clique sur l'élément de la liste

Question

J'ai ces lignes de code, et je ne peux pas fermer le menu de superposition lorsque je clique sur les éléments de menu. Quelqu'un peut-il aider?

<div id="myNav" class="overlay"> 
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> 
     <div id="myNav-a" class="overlay-content"> 
      <a href="#home">Home</a> 
      <a href="#projects">Projects</a> 
      <a href="#contact">Contact</a> 
      <a href="#about">About</a> 
     </div> 
    </div> 

<span class="span-menu" style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776;</span> 

<script> 
    function openNav() { 
     document.getElementById("myNav").style.width = "100%"; 
    } 

    function closeNav() { 
     document.getElementById("myNav").style.width = "0%"; 
    } 
</script> 

Answer 1

Au lieu d'utiliser width, vous pouvez utiliser display. Essayez l'extrait de code ci-dessous:

<div id="myNav" class="overlay"> 
 
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> 
 
    <div id="myNav-a" class="overlay-content"> 
 
    <a href="#home" onclick="closeNav()">Home</a> 
 
    <a href="#projects" onclick="closeNav()">Projects</a> 
 
    <a href="#contact" onclick="closeNav()">Contact</a> 
 
    <a href="#about" onclick="closeNav()">About</a> 
 
    </div> 
 
</div> 
 

 
<span class="span-menu" style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776;</span> 
 

 
<script> 
 
    function openNav() { 
 
    document.getElementById("myNav").style.display = "block"; 
 
    } 
 

 
    function closeNav() { 
 
    document.getElementById("myNav").style.display = "none"; 
 
    } 
 
</script>