Всем привет! В этом материале рассмотрим, как сделать выезжающее меню с использованием JQuery .
Всем привет! В этом материале рассмотрим, как сделать выезжающее меню с использованием JQuery.
Если вам нужно сделать выезжающее меню на сайте, то самый простой способ - использовать библиотеку Sliide.
Вы можете расположить меню слева, сверху, справа или снизу. Чтобы было понятнее, посмотрите демки.
Для чего использовать?
Например, у вас есть div, который вы хотите анимировать выезжающим эффектом с области за пределами просмотра в саму, собственно, область просмотра. Вы хотите иметь полный контроль над блоком и не беспокоиться об позиционировании или о том, как растянуть его по всей области экрана. Вы также не хотите думать о том, как анимация влияет на остальную часть страницы, как бороться с прокруткой и логикой активации и деактивации меню.
Какие зависимости?
Для работы нужна библиотека JQuery 2.1.0 или более новой версии. По идее должно работать и с более старыми версиями, но могут быть проблемы. Никаких файлов стилей не нужно, все стили встроенные.
Плагин поддерживает Chrome, Firefox, Safari, IE 10/11 и Edge.
Как использовать?
- Скачайте и подключите JQuery
- Скачайте и подключите файл скрипта
- Вам будет нужен div(nav или что угодно) и установите его свойство visibility в hidden. Вам также потребуется объект с настройками
var settings = {
toggle: "#sliiider-toggle", // селектор для меню
exit_selector: ".slider-exit", // селектор для кнопки выхода, если она необходима
animation_duration: "0.5s", // продолжительность анимации
place: "left", // откуда меню будет выезжать(слева, справа, сверху, снизу)
animation_curve: "cubic-bezier(0.54, 0.01, 0.57, 1.03)", // кривая анимации
body_slide: true, // установите в true, если хотите чтобы выезжала вся страница, а не только div
no_scroll: true, // установите в true, если хотите отключить прокрутку во время показа меню
};
$(‘#menu’).sliiide(settings); // инициализация
- Если вы собираетесь выдвигать меню горизонтально, тогда вам будет нужно установить стиль ширины блока, и плагин автоматически увеличит его высоту до максимальной. Если вы собираетесь выдвигать меню вертикально, вам будет нужно установить высоту для блока, и плагин автоматически увеличит ширину блока до максимальной.
- Для вас доступны полезные функции
var menu = $('.left-menu').sliiide({place: 'left', exit_selector: '.some-exit-selector', toggle: '#some-toggle-selector, no_scroll: true, body_slide: true'});
menu.activate(); // активирует меню
menu.deactivate(); // деактивирует меню
menu.reset(); // удаляет все стили, что были добавлены к любому элементу
Итак, на этом все. Спасибо за внимание!
