Простой рецепт с минимумом JS.
В мобильной версии (
media screen and (разрешение для мобильного) ) позиционируем меню абсолютно, задаем ширину и "прячем" за пределами экрана, указывая отрицательное расстояние:
width: 270px;
left: -270px;
Добавляем переключение класса по кнопке:
$("#button").click(function () {
$("body").toggleClass("open");
});
Соответственно при клике по кнопке #button элементу (в данном случае прям сразу body, хотя можно и конкретно менюшке) присваивается класс open.
При наличии этого класса позиционируем меню строго слева:
left: 0;
Все остальное содержимое страницы двигаем вправо:
left: 270px;
Чтобы все это происходило плавно добавляем
transition: left 0.3s linear;
Для всех "подвижных" элементов.
Все. Появляется класс .open - все сдвигается, меню "выезжает" слева. Пропадает - все возвращается на свои места.
П.С. Надеюсь, это то, что Вам было нужно. Скачивать какой-то файл с файлообменника чтобы точно узнать Ваши потребности, я, честно говоря, не хочу. Поэтому детально в проблему углубиться не смог.
