Открыть / закрыть анимированное меню гамбургера при нажатии кнопки - PullRequest
Новая
       9

Открыть / закрыть анимированное меню гамбургера при нажатии кнопки

0 голосов
/ 16 сентября 2018

Я использую анимированное меню гамбургера (https://jonsuh.com/hamburgers/), чтобы открыть полноэкранное меню. Все работает как положено, , но Я не могу понять, как закрыть меню по щелчку (и, конечно, повернуть анимацию вспять).

Я смог добавить класс is-active с помощью JS, и добавление "onclick =" openNav () "работает нормально, но кажется, что создание onclick =" toggleNav () "может быть более подходящим, я просто не могу понять, как написать это в 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 -->

1 Ответ

0 голосов
/ 16 сентября 2018

Что я сделал:

Всякий раз, когда на гамбургер нажимают, мы собираемся проверить, есть ли у него уже класс is-active.Если это так, то это означает, что меню в данный момент активно, и в этом случае мы должны вызвать closeNav.Если у него нет класса is-active, то это означает, что мы должны вызвать openNav.

closeNav и openNav будет:

  • Добавить / удалить классis-active из гамбургера.
  • Добавить / удалить стиль меню.

PS:

  • Поскольку вы не предоставили весь свойкод, тогда мы не могли бы реально увидеть, если текущее меню 0% height или 100% height.поэтому я изменил его на display block/none только для того, чтобы показать вам, что он работает.
  • Я удалил атрибут onclick из menu, поскольку у вас уже есть EventListener для него.
  • Убедитесь, что вы не включили link, который я указал в примере. 

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 -->
...