Как сделать, чтобы закрытие меню сопровождалось трансформацией иконки с Х на ≡?

Question

[Александр]

Прошу помощи, мучаюсь с данным меню уже 3-ую неделю, пытаюсь реализовать, чтобы при клике по меню ≡ происходила трансформация с ≡ на Х и выдвигался блок с меню, и при нажатии по БГ в любой точке происходила трансформация с Х на ≡ и осуществлялось закрывание данного меню.

codepen.io/anon/pen/KdZLXQ - если открыть, нажать на ≡, то откроется блок, где будет расположено будущее меню, контент отодвинется, так же произойдёт смена иконки с ≡ на Х. И если же нажать на Х, меню закроется и сменится иконка с Х на ≡. Вроде бы хорошо, НО! Если открыть меню опять и кликнуть по БГ, то меню закроется, но не произойдёт трансформация иконки с Х на ≡. Прошу помощи в решении данной проблемы ._.

Answer 1

[Денис Инешин]

Вот такой шаблон. Включение и выключение меню нужно вынести в отдельные функции. Клик по кнопкам только вызывает эти функции. Так же у вас должна быть некая переменная-флаг, которая проверяет состояние открытия. Примерно так:

var opened = true; // flag

function toggleMenu () {
    // здесь открываем/закрываем меню в зависимости от state
    // эта же функция сама вызывает смену кнопки, вот так:
    if (opened) {
        // анимация открытия меню
    } else {
        // анимация закрытия меню
    }

    toggleButton(); 
}

function toggleButton (state) {
    // здесь переключаем состояние кнопки
    if (opened) {
        // анимация превращения кнопки в крестик
    } else {
        // анимация превращения кнопки в палочки
    }
}

$('button').on('click', function () {
    // у вас должна быть одна и та же кнопка
    // просто внутри неё уже делайте анимацию между крестиком и палочками
    // проверяем флаг и делаем обратное действие
    opened = !opened;
    toggleMenu();
});

$('.bg').on('click', function () {
    // при клике на фон производим только выключение
    opened = false;
    toggleMenu();
});

Comments

[Александр]

Большое-большое Вам спасибо за подробное объяснение!)

Answer 2

[Котик Антон]

$('.c-hamburger').toggleClass('is-active', !menu.isOpen);

codepen.io/27cm/pen/EVoBVa

Comments

[Александр]

Благодарю Вас! Очень-очень выручили меня!)