3

I've been trying to make a responsive navbar with a hamburger menu toggle. Did it with a tutorial i found online and everything works, except the toggle for the menu. When i click on the icon nothing happens. I'm quite new at this so I don't know what to do for this. 

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

ul.nav-active {
  display: block !important;
}
<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>
Alexandre Elshobokshy
  • 10,720
  • 6
  • 27
  • 57
hoddypeak
  • 39
  • 1
  • 2
  • I think you forgot to include the css of your exemple. As I can see the menu is displayed or not by adding or removing a css class. Add the right style for your `ul.nav-active` element. – Alexis Feb 19 '19 at 15:19

3 Answers3

2

Your trigger click has a wrong selector. You use $('nav-menu') meaning that jQuery searches for all <nav-menu></nav-menu> tags but I think you want the class nav-menu so you should use $('.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');
    });
}

Here is the selectors for jQuery.

Geoffrey Migliacci
  • 391
  • 5
  • 15
-1

You need to use the right selector $('.nav-menu') : 

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

ul.nav-active {
  display: block !important;
}
<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>
Alexandre Elshobokshy
  • 10,720
  • 6
  • 27
  • 57
-2
<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');
 });
 });
Dipak
  • 21
  • 1