Створити доступні розсувні меню гамбургер з Offcanvas
Безкоштовно Плагін Offcanvas є одним з багатьох ресурсів для ковзних навігацій. Ви можете знайти купу подібних плагінів в Інтернеті, але Offcanvas виділяється з кількох причин.
Це досить легка бібліотека і поки він працює на jQuery, це також не дуже складно налаштувати. Це справедливо як для коду JavaScript, так і для HTML-коду, тому вам не доведеться змінювати навігацію за замовчуванням.
Додаток Offcanvas дозволяє вам позначте певні області, де має з'явитися меню. За замовчуванням це зазвичай ліва або права сторона екрана, але ви також можете вибрати верхню або нижню частину екрана.
Це робить Offcanvas великим для більше ніж просто розсувні меню гамбургерів. Його можна використовувати для ковзання панелей сповіщень або навіть поля для вибору електронних листів.
Кожна панель працює так само, як і користувач клацніть будь-де на сторінці, щоб приховати розсувне меню. І ви можете налаштування команд клавіатури які виконуються відповідно до рекомендацій ARIA для належного доступу до Інтернету.
Щоб встановити Offcanvas, вам просто потрібно копію jQuery разом з Файли Offcanvas CSS / JS. Ви можете витягти їх через npm, bower або безпосередньо з GitHub.
Також на сторінці GitHub див. трохи зразка коду Ви можете переробити, щоб відповідати Вашому сайту. Все, що потрібно для ковзання навігації елемент, що містить ваше меню (або що ви бажаєте перемістити на сторінку).
Це спрацьовує через прив'язку вказуючи на ідентифікатор вашого ковзного меню. Ось фрагмент з Offcanvas GitHub, який ілюструє короткий приклад.
… Меню …
Якщо ви в змозі злегка переробити HTML на вашій сторінці ви не повинні мати жодних проблем з налаштуванням.
The offcanvas ()
функція навіть підтримує опції для зміна швидкості анімації, класу за замовчуванням, і функції зворотного виклику , які можна запустити після відкриття або закриття меню.
Щоб дізнатися більше про демо-версію, перегляньте головну сторінку плагіна. Offcanvas - відмінний вибір JQuery-навігація якщо ви любите гамбургер меню.