@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>
  • Вопрос задан
  • 82 просмотра
Решения вопроса 1
xdevelx
@xdevelx
Web Developer
В простейшем виде так (стили сами добавите)

https://codepen.io/xdevelx/pen/wvwGwJd
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Chefranov
@Chefranov
Front-End, Back-End
сделайте активность бургера и меню отдельным классом, который будете менять. Вот в моем примере у кнопки бургера при активации добавляется класс is-active, и для меню добавляется класс active. Повторный клик по бургеру убирает эти классы
$('.hamburger').click(function (e) {
        e.preventDefault();
        $(this).toggleClass('is-active');
        $('.main-menu').toggleClass('active');
});
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Sveak Барнаул
от 50 000 руб.
Webimatic Санкт-Петербург
от 120 000 руб.
21 авг. 2019, в 18:58
100 руб./за проект
21 авг. 2019, в 18:32
5000 руб./за проект
21 авг. 2019, в 18:21
1000 руб./за проект