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) на больших и маленьких экранах:

Bootstrap - Вид меню navbar на больших экранах
Bootstrap - Вид меню navbar на больших экранах
Bootstrap - Вид меню navbar (offcanvas) на маленьких экранах
Bootstrap - Вид меню 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).



   Bootstrap 0    7707 +1

Комментарии (15)

  1. Владимир 24 апреля 2016, 16:27 # 0
    Добрый день, как к этому стандартному меню добавить выпадающие вложенные подпункты. Например: 1 уровень: продукция 2. Уровень — надраздел 3. Уровень — подраздел? Сейчас там всего два уровня — немного не функционально для расширенного представления на сайте.
    1. Александр Мальцев 25 апреля 2016, 16:08 # 0
      Попробуйте для этого подключить для navbar дополнение SmartMenus.
      Скачать его можно на странице: _http://www.smartmenus.org/download/
      Демо addon SmartMenus: _http://vadikom.github.io/smartmenus/src/demo/bootstrap-navbar.html
      1. Владимир 31 мая 2016, 16:52 # 0
        Александр, здравствуйте!
        Спасибо за статью.
        Не подскажите как в smartmenus сделать так, чтобы на больших экранах подменю появлялись при наведении, а на маленьких при клике по кнопочке с плюсиком, а не по всему пункту?
        На больших экранах вроде получилось сделать чтобы появлялось при наведении — всё в порядке. А на маленьких…
        Нужно чтобы на маленьких экранах при клике по названию пункта осуществлялся переход по ссылке этого пункта, а при клике по кнопочке с плюсом/минусом — разворачивание/сворачивания подменю.
        Ещё раз спасибо!
    2. Игорь 02 июня 2016, 06:38 # 0
      Здравствуйте. Подскажите пожалуйста, как сделать так, чтобы меню было видимо при загрузке страницы? По-умолчанию оно невидимо для пользователя и вызывается только после нажатия на соответствующую кнопку.
      1. Александр Мальцев 02 июня 2016, 12:00 # 0
        Здравствуйте. Оно и так по умолчанию видимо для всех устройств, ширина которых больше или равно 768px. Если Вам необходимо изменить это значение, то это делается так же как и для navbar — через переменные @grid-float-breakpoint и @grid-float-breakpoint-max. Как это выполнить посмотрите в соответствующей ветке, для этого можете воспользоваться поиском на сайте.
      2. SV_GO 07 июня 2016, 12:55 # 0
        здравствуйте
        а вы сами устанавливаете Bootstrap?
        если да напишите мне на почту пожалуйста
        1. Анатолий 08 июня 2016, 08:05 # 0
          Здравствуйте Александр, возник такой вопрос. При установке данного плагина все работает исправно, но на телефонах при открытии меню, нет скролла… как можно решить данную проблему?..
          1. Александр Мальцев 08 июня 2016, 12:41 # 0
            На android в Chrome 50 работает. Что за браузер и операционная система?
          2. Игорь 23 сентября 2016, 13:10 # 0
            Здравствуйте.
            При нажатии на кнопку не происходит никакого события.
            Подскажите пожалуйста, в чем я мог ошибиться?

            Скрипт и стили подключил, html поправил.

            Заранее большое спасибо! Ваш блог очень выручает
            1. Александр Мальцев 24 сентября 2016, 13:23 # 0
              Здравствуйте. Попробуйте посмотреть есть ли ошибки в консоли браузера (клавиша F12 -> вкладка Console). Скорее всего вы неправильно подключили скрипты.
            2. Сергей Горин 26 сентября 2016, 07:17 # 0
              Здравствуйте, Александр! Огромное спасибо за эту статью, offcanvas меню прикрутилось без проблем. Однако возник такой вопрос: почему-то на панели такого меню присутствуют полоски прокрутки (см. приложенный скриншот). В принципе они не мешаются и особо не портят вид, но т.к. не выполняют никакой функции в данной ситуации — заказчик просит от них избавиться, но мне не удается найти решение. Очень прошу Вас помочь!
              1. Сергей Горин 26 сентября 2016, 07:34 # 0
                Александр, я уже сам разобрался с этим. Оказалось всё проще простого )) Всего лишь нужно было в файле bootstrap.offcanvas.min.css заменить правило overflow:scroll на overflow:hidden. Так что прошу Вас извинить за излишнее беспокойство!
              2. Sergey 06 октября 2016, 04:56 # 0
                Бьюсь который час козалось бы все здорово в мобильной версии работает, но перестает работать в «десктопном» режиме перестает работать dropdown
                1. Sergey 06 октября 2016, 05:31 # 0
                  И наоборот…
                2. Sergey 06 октября 2016, 06:04 # 0
                  Проблема решена установкой версии 2.3.1
                  github.com/iamphill/Bootstrap-Offcanvas/releases

                  Вы должны авторизоваться, чтобы оставлять комментарии.