0
votes

Fermer le menu réactif "sur clic" JavaScript

J'ai besoin d'un script javascript pour fermer le menu après avoir cliqué sur un lien.

Mon code html:

<nav>
  <input type="checkbox" id="check">
  <label for="check" class="checkbtn">
    <i class="fa fa-bars"></i>
  </label>
  <label class="logo"><a href="#">My logo</a></label>
  <ul>
        <li><a class="js-scroll-trigger" href="link.html">link</a></li>
        <li><a class="js-scroll-trigger" href="link2.html">link2</a></li>
        <li><a class="js-scroll-trigger" href="link3.html">link3</a></li>
  </ul>
</nav>

Et css: https://www.codepile.net/pile/8nDgZrmE

Je ne sais pas comment écrire un script pour masquer le menu après avoir cliqué sur le lien. J'ai essayé ma force, mais je ne sais pas comment utiliser javascript.

Merci beaucoup pour votre aide.

javascript html menu

0 commentaires

3 Réponses :

0
votes

Essayez de donner affichage: aucun dans l'écouteur d'événement de clic.

document.querySelector("ul").addEventListner('click', (event) => {
    if (event.target.closest('li')) {
        document.querySelector("ul").style.display = 'none';
    }
})

0 commentaires

0
votes

J'ai créé un code simple pour copier-coller. Je ne sais pas si c'est ce que vous voulez faire mais cela masque la liste au clic.

<script>
    function toggle() {
        let menu = document.getElementById("menu")
        if (menu.style.display === "none") {
            menu.style.display = "block";
        } else {
            menu.style.display = "none";
        }
    }
</script>
<nav>
  <input type="checkbox" id="check">
  <label for="check" class="checkbtn">
    <i class="fa fa-bars"></i>
  </label>
  <label class="logo" onclick="toggle()"><a href="#">My logo</a></label>
  <ul id="menu">
        <li><a class="js-scroll-trigger" href="link.html" >link</a></li>
        <li><a class="js-scroll-trigger" href="link2.html">link2</a></li>
        <li><a class="js-scroll-trigger" href="link3.html">link3</a></li>
  </ul>
</nav>

0 commentaires

0
votes

Je pense que vous pouvez simplement décocher le bouton de menu, comme celui-ci, vous pouvez contrôler l'animation avec css comme lorsque vous l'ouvrez.

Vous pouvez l'essayer en exécutant le code:

<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>

<nav>
  <input type="checkbox" id="check"/>
  <label for="check" class="checkbtn">
    <i class="fa fa-bars"></i>
  </label>
  <label class="logo"><a href="#">My logo</a></label>
  <ul>
        <li><a class="js-scroll-trigger" href="#">link</a></li>
        <li><a class="js-scroll-trigger" href="#">link2</a></li>
        <li><a class="js-scroll-trigger" href="#">link3</a></li>
  </ul>
</nav>

nav{
    top: 0;
    position: fixed;
    z-index: 1;
    background: rgb(255, 255, 255, 0.5);
    height: 80px;
    width: 100%;
}
label.logo{
    color: #B4886B;
    font-size: 18px;
    line-height: 80px;
    padding: 0px 25px;
    text-decoration: none;
}

nav ul{
  float: right;
  margin-right: 20px;
}
nav ul li{
  display: inline-block;
  line-height: 80px;
  margin: 0 5px;
}
nav ul li a{
  color: black;
  font-size: 17px;
  padding: 0px 13px;
  border-radius: 3px;
  text-transform: uppercase;
}

nav a {
  color: #000;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 0.15em;
  display: inline-block;
  padding: 0 0px;
  position: relative;
}
nav a:after {    
  background: repeat scroll 0 0 transparent;
  bottom: 0;
  content: "";
  display: block;
  height: 2px;
  left: 50%;
  position: absolute;
  background: #000;
  transition: width 0.3s ease 0s, left 0.3s ease 0s;
  width: 0;
}
nav a:hover:after { 
  width: 100%; 
  left: 0; 
}



.checkbtn{
  font-size: 16px;
  color: black;
  float: right;
  line-height: 80px;
  margin-right: 40px;
  cursor: pointer;
  display: none;
  z-index: 100;
}
#check{
  display: none;
}
@media (max-width: 952px){
  label.logo{
    font-size: 16px;
    padding-left: 20px;
  }
      
  nav ul li a{
    font-size: 16px;
  }
}
@media (max-width: 858px){
  .checkbtn{
    display: block;
  }
  ul{
    position: fixed;
    width: 100%;
    height: 100vh;
    background: rgb(255, 255, 255, 0.8);
    top: 80px;
    left: -100%;
    text-align: center;
    transition: all .5s;
  }
  nav ul li{
    display: block;
    margin: 50px 0;
    line-height: 30px;
  }
  nav ul li a{
    font-size: 20px;
  }
  a:hover,a.active{
    background: none;
    /*color: white;*/
  }
  #check:checked ~ ul{
    left: 0;
  }
}

document.querySelector("ul").addEventListener('click', () => { document.querySelector("input#check").checked = false; })

0 commentaires