Open/Close Animated Hamburger Menu when Clicking Button

Question

I'm using an animated hamburger menu (https://jonsuh.com/hamburgers/) to open a full screen menu. It's all working as expected, but I can't figure out how to have the menu close on click (and of course reverse the animation).

I was able to add the class 'is-active' using JS, and adding "onclick="openNav()" works fine, but it seems like creating onclick="toggleNav()" might be more appropriate, I just can't seem to figure out how to write that in JS.

function openNav() {
  document.getElementById("popUpNav").style.height = "100%";
}

function closeNav() {
  document.getElementById("popUpNav").style.height = "0%";
}

// Hamburger Menu Spin
var hamburger = document.querySelector(".hamburger");
hamburger.addEventListener("click", function() {

  hamburger.classList.toggle("is-active");

});

<link href="https://cdnjs.cloudflare.com/ajax/libs/hamburgers/0.9.3/hamburgers.css" rel="stylesheet"/>
<!-- Full Screen Navigation -->
  <div id="primaryNav"> 
    <nav>
      <!-- Spinning Hamburger Button --> 
      <button class="hamburger hamburger--spin" type="button"   aria-label="Menu" aria-controls="navigation" aria-expanded="false" onclick="openNav()">
        <span class="hamburger-box">
          <span class="hamburger-inner"></span>
        </span>
      </button>

      <div id="popUpNav" class="overlay" onclick="closeNav()">

        <div class="overlay-content">
          <a href="#problemSolution" data-scroll onclick="closeNav()">Link 1</a>
          <a href="#" data-scroll onclick="closeNav()">Link 2</a>
          <a href="#" data-scroll onclick="closeNav()">Link 3</a>
          <a href="#" data-scroll onclick="closeNav()">Link 4</a>
        </div>          
      </div>
    </nav>
  </div><!--  End Primary Nav -->

score 3 · Answer 1 · answered Sep 16 '18 at 17:41

What I did:

Whenever the hamburger is being clicked, then we're going to check if it's already have is-active class. If it does, then it means the menu is currently active, and we should call closeNav in this scenario. If it doesn't have is-active class, then it means we should call openNav.

closeNav and openNav will:

Add/Remove the class is-active from the hamburger.
Add/Remove the style of the menu.

PS:

Since you didn't provide your whole code, then we couldn't realy see if the current menu is 0% height or 100% height. so I changed it to display block/none only to show you that it works.
I removed the onclick attribute from the menu, since you already have an EventListener for it.
Make sure you don't include the link I provided in the example.

function openNav() {
  hamburger.classList.add("is-active");
  document.getElementById("popUpNav").style.display = "block";
}

function closeNav() {
  hamburger.classList.remove("is-active");
  document.getElementById("popUpNav").style.display = "none";
}

// Hamburger Menu Spin
var hamburger = document.querySelector(".hamburger");

hamburger.addEventListener('click', () => hamburger.classList.contains('is-active') ? closeNav() : openNav());

closeNav();

<link href="https://cdnjs.cloudflare.com/ajax/libs/hamburgers/0.9.3/hamburgers.css" rel="stylesheet"/>
<!-- Full Screen Navigation -->
<div id="primaryNav">
  <nav>
    <!-- Spinning Hamburger Button -->
    <button class="hamburger hamburger--spin" type="button" aria-label="Menu" aria-controls="navigation"
            aria-expanded="false">
        <span class="hamburger-box">
          <span class="hamburger-inner"></span>
        </span>
    </button>

    <div id="popUpNav" class="overlay" onclick="closeNav()">

      <div class="overlay-content">
        <a href="#problemSolution" data-scroll onclick="closeNav()">Link 1</a>
        <a href="#" data-scroll onclick="closeNav()">Link 2</a>
        <a href="#" data-scroll onclick="closeNav()">Link 3</a>
        <a href="#" data-scroll onclick="closeNav()">Link 4</a>
      </div>
    </div>
  </nav>
</div><!--  End Primary Nav -->

Worked like a charm! I did in fact have a couple conflicting elements in my CSS that I had to clean up. I definitely was overcomplicating things. Thank you SO much! — Sarah Potter, Sep 16 '18 at 18:16

Open/Close Animated Hamburger Menu when Clicking Button

1 Answers1