• Canvi — off-canvas панель навигации

    Блог

    Персональный блог

Canvi — off-canvas панель навигации

Canvi — off-canvas панель навигации

Canvi навигационная панель (off-canvas) с несколькими параметрами для настройки. Можно использовать сразу несколько панелей на одной странице, устанавливать адаптивную ширину и использовать свои стили для панели.
Для использования Canvi нужно подключить в свой проект .js и .css файлы.

Базовое использование

Для правильной работы Canvi нужно подготовить html структуру, а именно добавить два DIV с классами .canvi-navbar и .canvi-content

 

JS

После этого, нужно вызвать Canvi

Множественные вызовы

Для множественного использования, нужно правильно указать значения для свойств: contentnavbar и openButton.
Стоит обратить внимание, что content может быть одинаковым, при множественных вызовах.

Доступность

Canvi использует aria-hidden=”true”, когда панель скрыта. Если вы хотите сделать более “умным” доступность canvi, то используйте атрибут inert, который поддерживается Canvi, но для этого нужно дополнительно подключить полифил.

Суть использования inert состоит в том, что когда у элемента inert=”true”, то user agent должен работать так, как если бы данный элемент отсутствовал на странице.
Например, если панель с навигацией скрыта, а мы нажимаем клавишу TAB (переход от одной ссылке на странице к другой), то user agent исключает все ссылки из панели, TAB их игнорирует. И наоборот, панель видима, и TAB последовательно перебирает ссылки и в панели навигации.

Опции

  • content: ‘.canvi-content’ — STRING, селектор, который указывает контентную часть в разметке. Нужно изменить, если на странице несколько вызовов canvi
  • isDebug: false — BOOLEAN, дебаггер
  • navbar: ‘.canvi-navbar’ — STRING, селектор, который указывает на навигацию в разметке. Нужно изменить, если на странице несколько вызовов
  • speed: ‘0.3s’ — STRING, можно указать скорость открытия/закрытия панели навигации.
  • openButton: ‘.canvi-open-button’ – STRING, селектор кнопки вызывающий открытие панели
  • position: ‘left’ — STRING, положение панели
  • pushContent: true — BOOLEAN, установите, если хотите двигать контент при открытии панели, false – в этом случае панель будет всплывать поверх страницы
  • width: ‘300px’ — STRING, ширина панели, указать нужно число и единиу измерения, например, px, em, %
  • responsiveWidth: [] — ARRAY, с этой опцией можно управлять шириной панели по брейкпоинтам.

Например,

Методы

Есть несколько методов для использования. Сначала нужно создать экземпляр Canvi в переменной.

И использовать следующие методы
open() — открывает панель

close() — закрывает панель

toggle() — попеременное переключение видимости панели

События

В Canvi есть и события. Для того, чтобы поймать событие, нужно повесить обработчик на тег body
Каждое событие возвращает три дополнительных элемента Canvi navbar, openButton, content.
Вы можете получить к ним доступ через объект события, например, e.detail.navbar

canvi.init
Это событие запускается, когда происходит инициализация Canvi.
Чтобы отловить событие init, нужно наблюдать за событием canvi.init.

canvi.before-open
Это событие срабатывает, когда вы нажимаете кнопку открытия панели.

canvi.after-open
Это событие срабатывает после открытия панели.

canvi.before-close
Это событие запускается до закрытия панели.

canvi.after-close
Это событие запускается после закрытия панели.

Исходники
Ссылки

 

 

 

 

 

 

 

 

 

 

 

Свяжитесь со мной

Используйте эту форму, чтобы рассказать мне о целях и потребностях вашего проекта.

[contact-form-7 404 "Not Found"]