Как добиться открывания и закрывания меню?

Question

[qwekaqwe]

Имеется такая разметка:

<header class="page-header">
    <div class="page-header__container">
      <div class="page-header__top-bar">
        <a class="page-header__logo">
          <img src="http://placehold.it/191x38" width="191" height="38" alt="Логотип магазина Кэт энерджи">
        </a>
        <!--Кнопка, которая должна показывать гамбургер при закрытом меню, и "X" при открытом-->
        <button class="page-header__toggle-menu" type="button"></button>
      </div>

      <nav class="page-header__navigation navigation">
        <ul class="navigation__list">
          <li class="navigation__item navigation__item--active">
            <a class="navigation__link">Главная</a>
          </li>
          <li class="navigation__item">
            <a class="navigation__link" href="catalog.html">Каталог продукции</a>
          </li>
          <li class="navigation__item">
            <a class="navigation__link" href="form.html">Подбор программы</a>
          </li>
        </ul>
      </nav>
    </div>
  </header>

Кнопка и меню находятся в разных дивах. Задача: По умолчанию меню закрыто, кнопка имеет вид "гамбургера", при нажатии меню открывается и кнопка имеет вид "X". Как с помощью добавления модификаторов и js добиться раскрытие и закрытия меню.

меню открыто:

<header class="page-header">
    <div class="page-header__container">
      <div class="page-header__top-bar">
        <a class="page-header__logo">
          <img src="http://placehold.it/191x38" width="191" height="38" alt="Логотип магазина Кэт энерджи">
        </a>
        <button class="page-header__toggle-menu--close" type="button"></button>
      </div>
 
      <nav class="page-header__navigation navigation">
        <ul class="navigation__list">
          <li class="navigation__item navigation__item--active">
            <a class="navigation__link">Главная</a>
          </li>
          <li class="navigation__item">
            <a class="navigation__link" href="catalog.html">Каталог продукции</a>
          </li>
          <li class="navigation__item">
            <a class="navigation__link" href="form.html">Подбор программы</a>
          </li>
        </ul>
      </nav>
    </div>
  </header>

меню закрыто:

<header class="page-header">
    <div class="page-header__container">
      <div class="page-header__top-bar">
        <a class="page-header__logo">
          <img src="http://placehold.it/191x38" width="191" height="38" alt="Логотип магазина Кэт энерджи">
        </a>
        <button class="page-header__toggle-menu--open" type="button"></button>
      </div>

      <nav class="page-header__navigation navigation--closed">
        <ul class="navigation__list">
          <li class="navigation__item navigation__item--active">
            <a class="navigation__link">Главная</a>
          </li>
          <li class="navigation__item">
            <a class="navigation__link" href="catalog.html">Каталог продукции</a>
          </li>
          <li class="navigation__item">
            <a class="navigation__link" href="form.html">Подбор программы</a>
          </li>
        </ul>
      </nav>
    </div>
  </header>

Answer 1

[Eugene Chefranov]

сделайте активность бургера и меню отдельным классом, который будете менять. Вот в моем примере у кнопки бургера при активации добавляется класс is-active, и для меню добавляется класс active. Повторный клик по бургеру убирает эти классы

$('.hamburger').click(function (e) {
        e.preventDefault();
        $(this).toggleClass('is-active');
        $('.main-menu').toggleClass('active');
});