3
votes

Hamburger Menu Toggle Javascript

J'ai essayé de créer une barre de navigation réactive avec une bascule de menu hamburger. Je l'ai fait avec un didacticiel que j'ai trouvé en ligne et tout fonctionne, sauf la bascule du menu. Lorsque je clique sur l'icône, rien ne se passe. Je suis assez nouveau dans ce domaine donc je ne sais pas quoi faire pour cela.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />
<div class='section menu'>
  <nav>
    <div class="toggle">
      <i class="fa fa-bars nav-menu" aria-hidden="true"></i>
    </div>
    <ul>
      <li><a href="#jumpcontent">Ãœber Uns</a></li>
      <li><a href="#jumplogin">Login</a></li>
      <li><a href="#jumpfeedback">Referenzen</a></li>
      <li><a href="#jumpcontact">Kontakt</a></li>
    </ul>
  </nav>
</div>

.section.menu ul {
  display: none;
}

ul.nav-active {
  display: block !important;
}

$(document).ready(function() {
  $('nav-menu').click(function() {
    $('ul').toggleClass('nav-active');
  })
})

javascript jquery html toggle hamburger-menu

1 commentaires

Je pense que vous avez oublié d'inclure le css de votre exemple. Comme je peux le voir, le menu est affiché ou non en ajoutant ou en supprimant une classe css. Ajoutez le bon style pour votre élément ul.nav-active .

3 Réponses :

3
votes

Le clic de votre déclencheur a un mauvais sélecteur. Vous utilisez $ ('nav-menu') ce qui signifie que jQuery recherche toutes les balises mais je pense que vous voulez la classe nav-menu donc vous devriez utiliser $('.nav-menu').

$(document).ready(function() {
    // .nav-menu select tags with the class nav-menu
    // nav-menu select nav-menu tags
    // #nav-menu the tag with the id nav-menu
    $('.nav-menu').click(function() {
        $('ul').toggleClass('nav-active');
        // to check in your console you can do :
        console.log('click triggered on nav-menu');
    });
}

Voici les sélecteurs pour jQuery .

0 commentaires

-2
votes

<div class='section menu'>
   <nav>
      <div class="toggle">
       <i class="fa fa-bars nav-menu" aria-hidden="true">Toggle Menu</i>
    </div>
   <ul>
   <li><a href="#jumpcontent">Ãœber Uns</a></li>
   <li><a href="#jumplogin">Login</a></li>
   <li><a href="#jumpfeedback">Referenzen</a></li>
   <li><a href="#jumpcontact">Kontakt</a></li>
     </ul>
    </nav>
   </div>

 $(document).ready(function(){
   $('.toggle').click(function(){
  $('ul').toggleClass('nav-active');
 });
 });

1 commentaires

Le code doit inclure une explication.

0
votes

Vous devez utiliser le bon sélecteur $ ('. nav-menu') :

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />
<div class='section menu'>
   <nav>
     <div class="toggle">
       <i class="fa fa-bars nav-menu" aria-hidden="true"></i>
     </div>
     <ul>
       <li><a href="#jumpcontent">Ãœber Uns</a></li>
       <li><a href="#jumplogin">Login</a></li>
       <li><a href="#jumpfeedback">Referenzen</a></li>
       <li><a href="#jumpcontact">Kontakt</a></li>
     </ul>
   </nav>
 </div>

.section.menu ul {
  display: none;
}

ul.nav-active {
  display: block !important;
}

$(document).ready(function(){
  $('.nav-menu').click(function(){
    $('ul').toggleClass('nav-active');
  })
})

0 commentaires