Bootstrap - Offcanvas (для меню navbar)

Опубликовано: 16.04.2018

видео Bootstrap - Offcanvas (для меню navbar)

Bootstrap 4 - Sidebar

Статья, в которой рассмотрим как установить offcanvas в качестве мобильного вида меню navbar.

Offcanvas меню

Offcanvas (off - вне, canvas - холста) меню - это меню, которое по умолчанию невидимо для пользователя. Вызывается оно как правило посредством нажатия на некоторый HTML-элемент (например, кнопку). В качестве способа появления такого меню обычно используется процесс выдвигания его с левой или правой стороны холста (рабочей области экрана браузера). В большинстве случаях offcanvas меню находит применение на устройствах, которые имеют небольшой размер (ширину) экрана.



В этой статье познакомимся с меню offcanvas, которое доступно на GitHub по адресу:

https://github.com/iamphill/Bootstrap-Offcanvas .

Установка offcanvas

Перед тем как переходить к установке меню offcanvas, его (архив offcanvas) предварительно необходимо скачать c GitHub.

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


Боковое Offcanvas меню для Bootstrap navbar

bootstrap.offcanvas.min.css bootstrap.offcanvas.min.js

Данные файлы необходимо скопировать в необходимые каталоги сайта и подключить их:

<!-- Подключение CSS-файла offcanvas --> <link rel="stylesheet" href="путь/до/bootstrap.offcanvas.min.css"> <!--...--> <!-- Подключение JavaScript-файла offcanvas --> <script src="путь/до/bootstrap.offcanvas.min.js"></script>

Внимание: Файл bootstrap.offcanvas.min.js необходимо подключать после подключения библиотеки jQuery.


Off Canvas Tutorial - HTML5 CSS3 jQuery

Использование меню offcanvas в качестве мобильного вида navbar

Для изменения мобильного вида меню Bootstrap navbar к offcanvas необходимо провести следующие изменения:

Изменить класс collapsed на offcanvas-toggle. Изменить значение параметра data-toggle на offcanvas. Установить необходимое значение атрибуту data-target. Например, #js-bootstrap-offcanvas. У HTML элемента имеющего классы collapse и navbar-collapse изменить: Значение атрибута class на navbar-offcanvas navbar-offcanvas-touch. Значение атрибута id на значение соответствующее атрибуту data-target (в данном случае на js-bootstrap-offcanvas).

В итоге меню navbar будет иметь следующий код: