Денис Инешин

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

$(document).on('keyup', function (event) {
    var key = event.which;
    
    switch (key) {
        case 8:  // backspace
        case 33: // Page Up
        case 37: // <-
            console.log("Назад");
            break;
        case 32: // space
        case 34: // Page Down
        case 39: // ->
            console.log("Вперед");
            break;
    }
});