CODEWITHSUNDEEP
javascripthtmlcssresponsive-designnavigation
user3609762
user3609762

Reputation: 15

Responsive navigation menu Toggle'n

I want my responsive navigation to toggle, the code below just expand the Menu button to the different pages. I want to toggle it, so now it just expand but not fold it in.

HTML: 

  <nav>
      <a  href="#footer_nav" >&#9776;  MENU</a>
      <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">Opleiding</a></li>
          <li><a href="#">Onderwijsprogramma</a></li>
          <li><a href="#">Organisatie</a></li>
          <li><a href="#">Stages en projecten</a></li>
      </ul>
  </nav>

CSS:

.in-visible { display: none; list-style: none; margin-left: 0; padding-left: 0; margin-bottom: 0; }

.visible { display: block; }

Javascript:

var responsivenav = document.querySelector('header > nav > ul');

responsivenav.classList.add('in-visible');

document.querySelector('header > nav > a').onclick = function(){ responsivenav.classList.add('visible'); }

Someone can help me please?

Upvotes: 0

Views: 634

Answers (1)

jme11
jme11

Reputation: 17374

You need to use the toggle method instead of the add method.

Demo

var responsivenav = document.querySelector('nav > ul');

responsivenav.classList.add('in-visible');

document.querySelector('nav > a').onclick = function() { 
    responsivenav.classList.toggle('visible');
}

Upvotes: 1

Related Questions