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

Question

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

1

Я использую анимированное меню гамбургеров (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 -->

Sarah Potter 16 сен. 2018, в 19:52

Источник

Теги:

javascript

css-animations

hamburger-menu

1 ответ

Ещё вопросы

Eliya Cohen · Answer 1 · 2018-09-16T15-53-00.000Z

Что я сделал:

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

closeNav и openNav будут:

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

PS:

Поскольку вы не предоставили весь свой код, мы не смогли бы увидеть, соответствует ли текущее меню 0% height или 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 -->

Работал как шарм! На самом деле в моем CSS было несколько конфликтующих элементов, которые мне пришлось очистить. Я определенно усложнял вещи. Большое спасибо!