Canvi — off-canvas панель навигации
Добавить в избранное
Canvi навигационная панель (off-canvas) с несколькими параметрами для настройки. Можно использовать сразу несколько панелей на одной странице, устанавливать адаптивную ширину и использовать свои стили для панели.
Для использования Canvi нужно подключить в свой проект .js и .css файлы.
<script src="canvi.js"></script>
Базовое использование
Для правильной работы Canvi нужно подготовить html структуру, а именно добавить два DIV с классами .canvi-navbar и .canvi-content
<html lang="en">
<head></head>
<body>
<div class="canvi-navbar"></div>
<div class="canvi-content"></div>
</body>
</html>
JS
После этого, нужно вызвать Canvi
Множественные вызовы
Для множественного использования, нужно правильно указать значения для свойств: content, navbar и openButton.
Стоит обратить внимание, что content может быть одинаковым, при множественных вызовах.
content: '.js-canvi-content',
navbar: '.js-canvi-navbar--left',
openButton: '.js-canvi-open-button--left'
});
var canviRight = new Canvi({
content: '.js-canvi-content',
navbar: '.js-canvi-navbar--right',
openButton: '.js-canvi-open-button--right'
});
Доступность
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, с этой опцией можно управлять шириной панели по брейкпоинтам.
Например,
breakpoint: "600px",
width: "280px"
}, {
breakpoint: "1280px",
width: "320px"
}, {
breakpoint: "1600px",
width: "380px"
} ]
Методы
Есть несколько методов для использования. Сначала нужно создать экземпляр Canvi в переменной.
content: '.js-canvi-content',
navbar: '.js-canvi-navbar--right',
openButton: '.js-canvi-open-button--right',
position: 'right',
pushContent: true,
width: '300px'
});
И использовать следующие методы
open() — открывает панель
canviRight.open();
close() — закрывает панель
canviRight.close();
toggle() — попеременное переключение видимости панели
canviRight.toggle();
События
В Canvi есть и события. Для того, чтобы поймать событие, нужно повесить обработчик на тег body
Каждое событие возвращает три дополнительных элемента Canvi —navbar, openButton, content.
Вы можете получить к ним доступ через объект события, например, e.detail.navbar
canvi.init
Это событие запускается, когда происходит инициализация Canvi.
Чтобы отловить событие init, нужно наблюдать за событием canvi.init.
document.querySelector('body').addEventListener('canvi.init', function(e) {
console.log('Catch Canvi init event...');
});
canvi.before-open
Это событие срабатывает, когда вы нажимаете кнопку открытия панели.
document.querySelector('body').addEventListener('canvi.before-open', function(e) {
console.log('Catch Canvi before-open event...');
});
canvi.after-open
Это событие срабатывает после открытия панели.
document.querySelector('body').addEventListener('canvi.after-open', function(e) {
console.log('Catch Canvi after-open event...');
});
canvi.before-close
Это событие запускается до закрытия панели.
document.querySelector('body').addEventListener('canvi.before-close', function(e) {
console.log('Catch Canvi before-close event...');
});
canvi.after-close
Это событие запускается после закрытия панели.
document.querySelector('body').addEventListener('canvi.after-close', function(e) {
console.log('Catch Canvi after-close event...');
});