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    5654 0

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

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

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

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

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