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

4 марта 2019 | Qudrat Qodirov | Для сайта Скрипты | 170

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

<link rel="stylesheet" href="canvi.css">
<script src="canvi.js"></script>

1 2	<link rel="stylesheet" href="canvi.css"> <script src="canvi.js"></script>

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

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

<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
    <div class="canvi-navbar"></div>
    <div class="canvi-content"></div>
</body>
</html>

<!DOCTYPE html>

<body>

</body>

</html>

JS

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

var canvi = new Canvi();

1	var canvi = new Canvi();

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

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

var canviLeft = new Canvi({
    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'
});

var canviLeft = new Canvi({

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, с этой опцией можно управлять шириной панели по брейкпоинтам.

Например,

responsiveWidths: [ {
    breakpoint: "600px",
    width: "280px"
}, {
    breakpoint: "1280px",
    width: "320px"
}, {
    breakpoint: "1600px",
    width: "380px"
} ]

responsiveWidths: [ {

breakpoint: "600px",

width: "280px"

}, {

breakpoint: "1280px",

width: "320px"

}, {

breakpoint: "1600px",

width: "380px"

} ]

Методы

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

var canviRight = new Canvi({
    content: '.js-canvi-content',
    navbar: '.js-canvi-navbar--right',
    openButton: '.js-canvi-open-button--right',
    position: 'right',
    pushContent: true,
    width: '300px'
});

var canviRight = new 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();

1	canviRight.open();

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

canviRight.close();

1	canviRight.close();

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

canviRight.toggle();

1	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...');
});

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...');
});

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...');
});

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...');
});

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...');
});

document.querySelector('body').addEventListener('canvi.after-close', function(e) {

console.log('Catch Canvi after-close event...');

});

Исходники

canvi

Ссылки

https://github.com/thepinecode/canvi

http://pineco.de/project/canvi-off-canvas-navigation/

Обсуждение закрыто.