Добрый вечер! На досуге занимаюсь разработкой собственного сайта и возникли трудности в создании off-canvas меню. Структура страницы состоит из трёх блоков - "шапка", меню и содержимое. Изначально меню видно. Ширина меню составляет 20% от ширины контейнера, ширина блока с содержимым - 80%. Упрощённо, задача заключается в том, что при нажатии на кнопку "Меню", меню плавно смещается за край контейнера. В свою очередь блок содержимого плавно растягивается до 100% от ширины контейнера. При повторном нажатии на кнопку "Меню", слева плавно выходит меню, которое занимает 20% от ширины контейнера. В свою очередь ширина блока с содержимым плавно уменьшается до 80%. Именно уменьшается, а не частично смещается за край контейнера. (именно это заставило писать своё решение). Схематически это выглядит так: Появление/исчезновение меню я достиг за счёт css свойства "transform: translate3d(-100%, 0, 0)". Проблема в том, что при смещении меню за край контейнера, блок содержимого хоть и растягивается до 100%, но "падает" вниз из за нехватки места. Понимаю, что за меню остались те самые 20% от ширины контейнера. Как быть? Буду очень Вам благодарен за помощь! Код: HTML:
#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'); } });
Ответ
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/
Аж приятно отвечать на такой понятно расписанный вопрос, спасибо!)
Комментариев нет:
Отправить комментарий