Як зробити виїжджає меню на 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() -// видаляє всі стилі, що були додані до будь-якого елементу

Отже, на цьому все. Дякую за увагу!

Поділися в соціальних мережах:

Схожі