Всім привіт! У цій статті ми розглянемо, як зробити виїжджає меню з використанням JQuery.
Якщо вам потрібно зробити виїжджає меню на сайті, то найпростіший спосіб - використовувати бібліотеку Sliide.
Ви можете розташувати меню зліва, зверху, праворуч або знизу. Щоб було зрозуміліше, подивіться демки.
Для чого використовувати?
Які залежності?
Для роботи потрібна бібліотека JQuery 2.1.0 або більш нової версії. За ідеєю повинно працювати і з більш старими версіями, але можуть бути проблеми. Ніяких файлів стилів не потрібно, всі стилі вбудовані.
Плагін підтримує Chrome. Firefox. Safari. IE 10/11 і Edge.
Як використовувати?
- Скачайте та підключіть JQuery
- Скачайте та підключіть файл скрипта
- Вам буде потрібен div (nav або що завгодно) і встановіть його властивість visibility в hidden. Вам також буде потрібно об'єкт з настройками
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); // ініціалізація
- Якщо ви збираєтеся висувати меню горизонтально, тоді вам буде потрібно встановити стиль ширини блоку, і плагін автоматично збільшить його висоту до максимальної. Якщо ви збираєтеся висувати меню вертикально, вам буде потрібно встановити висоту для блоку, і плагін автоматично збільшить ширину блоку до максимальної.
- Для вас доступні корисні функції
menu.activate (); // активує меню
menu.deactivate (); // деактивує меню
menu.reset (); // видаляє всі стилі, що були додані до будь-якого елементу
Отже, на цьому все. Дякую за увагу!