How can I make the menu close be accompanied by the transformation of the icon from X to ≡?

Question

JavaScript

I ask for help, I have been suffering with this menu for the 3rd week already, I am trying to implement so that when you click on the menu ≡, a transformation occurs from ≡ to X and a block with the menu is extended, and when you click on the BG at any point, a transformation occurs from X to ≡ and is carried out close this menu.
codepen.io/anon/pen/KdZLXQ - if you open it, click on ≡, the block where the future menu will be located will open, the content will move away, the icon will also change from ≡ to X. And if you click on X, the menu will close and the icon will change from X to ≡. Looks good, BUT! If you open the menu again and click on the BG, the menu will close, but the icon will not transform from X to ≡. I ask for help in solving this problem ._.

Answer 1

Here is such a template. Turning the menu on and off must be moved to separate functions. Clicking the buttons only calls these functions. Also, you should have some kind of flag variable that checks the status of the opening. More or less like this:

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();
});