Вот такой шаблон. Включение и выключение меню нужно вынести в отдельные функции. Клик по кнопкам только вызывает эти функции. Так же у вас должна быть некая переменная-флаг, которая проверяет состояние открытия. Примерно так:
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();
});