Как сделать выезжающее меню на сайте?

Добрый день, тостеровцы!
Пишу адаптивный дизайн, и вот никак не могу сообразить, как же мне организовать выезд менюшки по клику по "бутерброду"? Знаю, что в сети есть куча скриптов на эту тему, но совсем не понимаю, что с этими скриптами собственно делать, как устанавливать. Да и все найденные мной скрипты с различными анимациями, а мне нужно, чтоб банально по клику появлялся блок слева (или справа, не суть), а по повторному клику - скрывался.
Прошу подсказать, заранее спасибо.
  • Вопрос задан
  • 29736 просмотров
Решения вопроса 1
eucalipt
@eucalipt
Самоделкин.
Для блока слева создай отдельный элемент на странице. Например, div с id "menu". В него помещай все, что тебе нужно. Умеешь подключать JQuery? На всякий случай, объясню.

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <!-- JQUERY -->


Вот эту строчку впихни в head своей страницы. Теперь у нас подключен JQuery.
Что мы делаем дальше? Дальше нам надо отловить клик по нашему "бутерброду" и после клика, собственно, и выдвинуть менюху. Как это делается:

$(document).ready(function() {
  $("#menu").click(function() {
    $(this).addClass("show");
  });
});


Этот код просто выдели в отдельный .js файл (ну и подключи его как простой .js скрипт, разумеется. Только он должен быть подключен после того, как подключишь JQuery).

Короче, что мы сделали: мы отловили клик по этому элементу и повесили на него функцию, которая к нашему div'у добавит класс "show". Дальше уже чистый css.

#menu {
/* тут твои стили */
left: -350px;
}

#menu.show {
/* тут твои стили */
left: 0px;
}


Я думаю, суть ясна. Когда у менюхи появляется класс "show", то тогда мы просто "выдвигаем" ее из-за левого края страницы. По желанию можно сделать это плавным:

#menu {
/* тут твои стили */
transition: left ease 0.2s;
left: -350px;
}

#menu.show {
/* тут твои стили */
left: 0px;
}


Кстати, этот код написан под менюху, шириной в 350px.

Теперь ее надо закрыть. Тут 2 способа. Хотя нет, 3.
Можно отловить в нашем скрипте уход мышки с элемента и просто убрать класс "show" (mouseleave, removeClass()). А можно отловить клик по НЕэлементу див. Это тоже в JQ.
А можно еще расставить флаги, и контролировать, когда меню открыта, при нажатии на бутерброд, делать одно, и когда закрыта - другое.
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
Вот вам простейший работающий пример jsfiddle.net/br3t/h220dexq
По установке - добавить нужный css и подключить скрипт
Ответ написан
Комментировать
frost18
@frost18
Программист PHP
Примерно вот так jsfiddle.net/0wa5dv7n
Ответ написан
Комментировать
alexvoz
@alexvoz
Flash-developer
Есть еще интересный пример без js вообще https://www.mobila.name/post/53eb5a219dcff/
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы