@artyom_jeman

Боковое меню для мобильного сайта?

Ребята, здравствуйте!
Суть в чем, есть меню, обычная на сайте, на моб. версии есть такая кнопочка, при нажатии на нее, появляется всплывающее меню.
Вопрос, как сделать чтобы оно выводилось сбоку как у Вконтакте например?
В какую сторону копать? Покажите мне направление только, а я дальше сам попробую додумать)
  • Вопрос задан
  • 5959 просмотров
Пригласить эксперта
Ответы на вопрос 3
Простой рецепт с минимумом 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 - все сдвигается, меню "выезжает" слева. Пропадает - все возвращается на свои места.

П.С. Надеюсь, это то, что Вам было нужно. Скачивать какой-то файл с файлообменника чтобы точно узнать Ваши потребности, я, честно говоря, не хочу. Поэтому детально в проблему углубиться не смог.
Ответ написан
xmoonlight
@xmoonlight
https://sitecoder.blogspot.com
css:
right:0px;
display:inline-block;
Ответ написан
Комментировать
@Aborrol
Мне нравится как это реализовано в css фреймворке materializecss.com, там можно скачать фреймворк в виде sass, и пересобрать только используя стили и скрипты для бокового меню.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы