Off-canvas меню

#меню #transition #javascript #transform #css

Добрый вечер!
На досуге занимаюсь разработкой собственного сайта и возникли трудности в создании
off-canvas меню. Структура страницы состоит из трёх блоков - "шапка", меню и содержимое.
Изначально меню видно. Ширина меню составляет 20% от ширины контейнера, ширина блока
с содержимым - 80%.
Упрощённо, задача заключается в том, что при нажатии на кнопку "Меню", меню плавно
смещается за край контейнера. В свою очередь блок содержимого плавно растягивается
до 100% от ширины контейнера.
При повторном нажатии на кнопку "Меню", слева плавно выходит меню, которое занимает
20% от ширины контейнера. В свою очередь ширина блока с содержимым плавно уменьшается
до 80%. Именно уменьшается, а не частично смещается за край контейнера. (именно это
заставило писать своё решение).
Схематически это выглядит так:



Появление/исчезновение меню я достиг за счёт css свойства "transform: translate3d(-100%,
0, 0)". Проблема в том, что при смещении меню за край контейнера, блок содержимого
хоть и растягивается до 100%, но "падает" вниз из за нехватки места. Понимаю, что за
меню остались те самые 20% от ширины контейнера.
Как быть? 
Буду очень Вам благодарен за помощь!
Код:
HTML:

   

      Menu
   
   

      Nav
   
   

      Main
   


CSS:
.container {
    max-width: 75em;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
}

#header {
    width: 100%;
}

#nav {
    float: left;
    width: 20%;
}
#main {
    float: right;
    width: 80%;
    transition: transform 500ms ease 0s;
    background: gray;
}
#nav {
    background: green;
    transform: translate3d(-100%, 0, 0);
    transition: transform 500ms ease 0s;
}
#nav.visible {
    transform: none;
}

#main.large {
    width: 100%;
}

JS:
var nav = $("#nav");

$('#show-nav').click(function(e) {
    e.preventDefault();

    if (nav.hasClass('visible')) {
        nav.removeClass('visible');
        $("#main").addClass('large');
    } else {
        nav.addClass('visible');
        $("#main").removeClass('large');
    }
});
    

Ответы

Ответ 1

js:
$('#show-nav').click(function(e) {
    e.preventDefault();
    $(this).parents('.container').toggleClass('large');
});

css:
#main {
    float: right;
    width: 80%;
    transition: all 0.2s ease-in-out;
    background: gray;
}
#nav {
    background: green;
    transition: all 0.2s ease-in-out;
    float: left;
    width: 20%;
}

.container.large #main {
    width: 100%;
}

.container.large #nav {
    width:0%;
}

Пример: http://jsfiddle.net/LcNJ4/1/
Аж приятно отвечать на такой понятно расписанный вопрос, спасибо!)