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

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

Offcanvas меню

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

В этой статье познакомимся с меню offcanvas, которое доступно на GitHub по адресу:
https://github.com/iamphill/Bootstrap-Offcanvas.

Установка offcanvas

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

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

• 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.

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

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

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

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

<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Бренд</a>
      <button type="button" class="navbar-toggle offcanvas-toggle pull-right" data-toggle="offcanvas" data-target="#js-bootstrap-offcanvas" style="float:left;">
        <span class="sr-only">Toggle navigation</span>
        <span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </span>
      </button>
    </div>
    <div class="navbar-offcanvas navbar-offcanvas-touch" id="js-bootstrap-offcanvas">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Ссылка 1</a></li>
        <li><a href="#">Ссылка 2</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Ссылка 3<span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Ссылка 3-1</a></li>
            <li><a href="#">Ссылка 3-2</a></li>
            <li><a href="#">Ссылка 3-3</a></li>
            <li class="divider"></li>
            <li><a href="#">Ссылка 3-4</a></li>
            <li class="divider"></li>
            <li><a href="#">Ссылка 3-5</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Что найти?">
        </div>
        <button type="submit" class="btn btn-default">Поиск</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Ссылка 4</a></li>
        <li><a href="#">Ссылка 5</a></li>
      </ul>
    </div>
  </div>
</nav>

Вид меню navbar (с offcanvas) на больших и маленьких экранах:

Демо меню navbar с offcanvas

При необходимости меню off-canvas в navbar можно расположить справа. Для этого необходимо добавить дополнительный класс navbar-offcanvas-right к элементу, имеющему класс navbar-offcanvas:

<div class="navbar-offcanvas navbar-offcanvas-touch navbar-offcanvas-right" id="js-bootstrap-offcanvas">

Настройка меню offcanvas

Настройка меню offcanvas осуществляется посредством переменных SASS, которые расположены в файле _vars.scss.

Вот некоторые из них:

$offcanvas‐width: 250px !default; // ширина меню offcanvas
$offcanvas‐animation‐time: 0.15s !default; // время анимации (появления и исчезновения) меню offcanvas
$offcanvas‐toggle‐background: #f8f8f8 !default; // цвет заднего фона кнопки
$offcanvas‐toggle‐bars‐color: #000 !default; // цвет полосок кнопки

После настройки переменных необходимо запустить препроцессор для обработки файла bootstrap.offcanvas.scss и получения простого CSS-файла (bootstrap.offcanvas.scss).