Bootstrap - Dropdown (выпадающий список)

В этой статье рассмотрим, как в Bootstrap осуществляется добавление выпадающего меню к кнопкам, основному меню, вкладкам и другим компонентам этого фреймворка.

Что такое выпадающий список

Выпадающий список – это элемент интерфейса, обычно представляющий собой некоторое меню, которое показывается только после того, как пользователь нажал на некоторый элемент или навёл на него курсор. В большинстве случаев в качестве такого элемента выступает кнопка или пункт меню. Для того чтобы указать что этот элемент имеет dropdown меню, обычно рядом с его содержимым отображается стрелка, направленная вниз.

Кнопка с выпадающим меню

В Bootstrap создание кнопки или ссылки с выпадающим меню начинается с создания обёртки (элемента div с классом dropdown).

Класс dropdown используется для установки этому элементу относительного позиционирования (position: relative).

Следующий шаг сводится в добавление в эту обёртку двух элементов: кнопки или ссылки, и блока меню.

После этого к кнопке нужно добавить атрибут data-toggle со значением dropdown.

Пример HTML кода для создания кнопки с выпадающим меню на Bootstrap 4:

<!-- Bootstrap 4 -->
<div class="btn-group">
  <!-- Кнопка -->
  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Выполнить
  </button>
  <!-- Меню -->
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Действие 1</a>
    <a class="dropdown-item" href="#">Действие 2</a>
    <a class="dropdown-item" href="#">Действие 3</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Действие 4</a>
  </div>
</div>

Пример создания кнопки с dropdown на Bootstrap 3:

<!-- Bootstrap 3 -->
<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Выполнить
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Действие 1</a></li>
    <li><a href="#">Действие 2</a></li>
    <li><a href="#">Действие 3</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Действие 4</a></li>
  </ul>
</div>

Выпадающие списки для кнопок через разделитель

На следующем примере показана возможность добавления выпадающего списка к кнопке c помощью дополнительной кнопки со стрелочкой, которая отделена от предыдущей кнопки с помощью разделителя. Для группирования (объединения) двух этих кнопок используется класс .btn-group (группа кнопок).

<!-- Bootstrap 3 - Split button -->
<div class="btn-group">
  <button type="button" class="btn btn-default">Кнопка</button>
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
    aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Пункт 1</a></li>
    <li><a href="#">Пункт 2</a></li>
    <li class="divider"></li>
    <li><a href="#">Пункт 3</a></li>
  </ul>
</div>

<!-- Bootstrap 4 - Split button -->
<div class="btn-group">
  <button type="button" class="btn btn-primary">Выполнить</button>
  <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Действие 1</a>
    <a class="dropdown-item" href="#">Действие 2</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Действие 3</a>
  </div>
</div>

Чтобы изменить размеры кнопок с выпадающим списком Вы можете воспользоваться классами Twitter Bootstrap: .btn-lg (большая кнопка), .btn-sm (маленькая кнопка) и .btn-xs (очень маленькая кнопка).

Выпадающие меню для кнопок, объединенных в группу

На следующем примере показана возможность добавления выпадающего меню для кнопки, которая находится в группе кнопок (.btn-group):

<!-- Кнопки, объединенные в группу с помощью класса .btn-group -->
<div class="btn-group">
  <!-- Обычные кнопки -->
  <button type="button" class="btn btn-warning">Обычная кнопка</button>
  <button type="button" class="btn btn-danger">Обычная кнопка</button>
  <!-- Кнопка с выпадающим меню -->
  <div class="btn-group">
    <button type="button" data-toggle="dropdown" class="btn btn-info dropdown-toggle">
      Кнопка с выпадающим меню
      <span class="caret"></span>
    </button>
    <!-- Выпадающее меню -->
    <ul class="dropdown-menu">
      <!-- Пункты меню -->
      <li><a href="#">Пункт 1</a></li>
      <li><a href="#">Пункт 2</a></li>
      <li class="divider"></li>
      <li><a href="#">Пункт 3</a></li>
    </ul>
  </div>
</div>

Для создания кнопок сгруппированных вертикально достаточно изменить класс .btn-group на .btn-group-vertical.

<!-- Кнопки, объединенные в группу с помощью класса .btn-group -->
<div class="btn-group-vertical">
  <!-- Обычные кнопки -->
  <button type="button" class="btn btn-warning">Обычная кнопка</button>
  <button type="button" class="btn btn-danger">Обычная кнопка</button>
  <!-- Кнопка с выпадающим меню -->
  <div class="btn-group">
    <button type="button" data-toggle="dropdown" class="btn btn-info dropdown-toggle">
      Кнопка с выпадающим меню
      <span class="caret"></span>
    </button>
    <!-- Выпадающее меню -->
    <ul class="dropdown-menu">
      <!-- Пункты меню -->
      <li><a href="#">Пункт 1</a></li>
      <li><a href="#">Пункт 2</a></li>
      <li class="divider"></li>
      <li><a href="#">Пункт 3</a></li>
    </ul>
  </div>
</div>

Создания выпадающего меню, открывающегося вверх

Вы можете создать выпадающее меню, открывающееся вверх от родительского элемента. Для этого необходимо добавить дополнительный класс .dropup к этому родительскому элементу.

<!-- Кнопки, объединенные в группу с помощью класса .btn-group -->
<div class="btn-group">
  <!-- Обычные кнопки -->
  <button type="button" class="btn btn-warning">Обычная кнопка</button>
  <button type="button" class="btn btn-danger">Обычная кнопка</button>
  <!-- Кнопка с выпадающим меню, которое открывается вверх -->
  <div class="btn-group dropup">
    <button type="button" data-toggle="dropdown" class="btn btn-info dropdown-toggle">
      Вверх
      <span class="caret"></span>
    </button>
    <!-- Выпадающее меню -->
    <ul class="dropdown-menu">
      <!-- Пункты меню -->
      <li><a href="lessons/bootstrap-3/98-bootstrap-3-dropdown-lists#samples">Пункт 1</a></li>
      <li><a href="lessons/bootstrap-3/98-bootstrap-3-dropdown-lists#samples">Пункт 2</a></li>
      <li class="divider"></li>
      <li><a href="lessons/bootstrap-3/98-bootstrap-3-dropdown-lists#samples">Пункт 3</a></li>
    </ul>
  </div>
  <!-- Кнопка с выпадающим меню, которое открывается вниз -->
  <div class="btn-group">
    <button type="button" data-toggle="dropdown" class="btn btn-primary dropdown-toggle">
      Вниз
      <span class="caret"></span>
    </button>
    <!-- Выпадающее меню -->
    <ul class="dropdown-menu">
      <!-- Пункты меню -->
      <li><a href="lessons/bootstrap-3/98-bootstrap-3-dropdown-lists#samples">Пункт 1</a></li>
      <li><a href="lessons/bootstrap-3/98-bootstrap-3-dropdown-lists#samples">Пункт 2</a></li>
      <li class="divider"></li>
      <li><a href="lessons/bootstrap-3/98-bootstrap-3-dropdown-lists#samples">Пункт 3</a></li>
    </ul>
  </div>
</div>

Создание выпадающих меню с помощью Twitter Bootstrap

Вы можете добавить выпадающие меню к большинству компонентов Twitter Bootstrap (кнопки, навигационное меню, вкладки и т.д.) с помощью плагина dropdown (выпадающий список).

Выпадающие списки в навигационном меню (navbar)

Добавление выпадающих списков к элементам навигационного меню:

<nav class="navbar navbar-default navbar-static">
  <div class="container-fluid">
    <div class="navbar-header">
      <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".js-navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#" style="padding:15px 15px;">Название проекта</a>
    </div>
    <div class="collapse navbar-collapse js-navbar">
      <ul class="nav navbar-nav">
        <li><a href="#">Главная</a></li>
        <li class="dropdown">
          <a id="drop1" href="#" class="dropdown-toggle" data-toggle="dropdown">
            Меню
            <span class="caret"></span>
          </a>
          <ul class="dropdown-menu">
            <li><a href="#">Текст подпункта</a></li>
            <li><a href="#">Текст подпункта</a></li>
            <li class="divider"></li>
            <li><a href="#">Текст подпункта</a></li>
          </ul>
        </li>
        <li class="dropdown">
          <a id="drop1" href="#" class="dropdown-toggle" data-toggle="dropdown">
            Меню
            <span class="caret"></span>
          </a>
          <ul class="dropdown-menu">
            <li><a href="#">Текст подпункта</a></li>
            <li><a href="#">Текст подпункта</a></li>
            <li class="divider"></li>
            <li><a href="#">Текст подпункта</a></li>
          </ul>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown">
          <a id="drop1" href="#" class="dropdown-toggle" data-toggle="dropdown">
            Меню
            <span class="caret"></span>
          </a>
          <ul class="dropdown-menu">
            <li><a href="#">Текст подпункта</a></li>
            <li><a href="#">Текст подпункта</a></li>
            <li class="divider"></li>
            <li><a href="#">Текст подпункта</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

Выпадающие списки в навигационных панелях (navs)

Добавление выпадающих списков к элементам навигационных панелей navs:

<ul class="nav nav-pills">
  <li class="active"><a href="#">Главная</a></li>
  <li class="dropdown">
    <a href="#" data-toggle="dropdown" class="dropdown-toggle">
      Меню
      <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
      <li><a href="#">Текст подпункта</a></li>
      <li><a href="#">Текст подпункта</a></li>
      <li class="divider"></li>
      <li><a href="#">Текст подпункта</a></li>
    </ul>
  </li>
  <li class="dropdown">
    <a href="#" data-toggle="dropdown" class="dropdown-toggle">
      Меню
      <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
      <li><a href="#">Текст подпункта</a></li>
      <li><a href="#">Текст подпункта</a></li>
      <li class="divider"></li>
      <li><a href="#">Текст подпункта</a></li>
    </ul>
  </li>
  <li class="dropdown pull-right">
    <a href="#" data-toggle="dropdown" class="dropdown-toggle">
      Меню
      <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
      <li><a href="#">Текст подпункта</a></li>
      <li><a href="#">Текст подпункта</a></li>
      <li class="divider"></li>
      <li><a href="#">Текст подпункта</a></li>
    </ul>
  </li>
</ul>

Добавление выпадающих меню (Dropdowns) с помощью Data Attributes

С помощью Data Attributes Twitter Bootstrap Вы можете добавить выпадающие списки (dropdowns) к элементам веб-страницы. Данный принцип реализуется путём добавления к ссылке (<a>) или кнопке (<input>, <button>) атрибута data-toggle="dropdown" и соответствующей разметки. В результате чего, при нажатии на эти элементы, выпадающее меню будет отображаться или скрываться.

Ниже представлена возможность добавления выпадающего меню к ссылке с помощью data attributes:

<div class="dropdown">
  <a href="#" data-toggle="dropdown" class="dropdown-toggle">
    Ссылка с выпадающим меню
    <b class="caret"></b>
  </a>
  <ul class="dropdown-menu">
    <li><a href="#">Пункт 1</a></li>
    <li><a href="#">Пункт 2</a></li>
    <li class="divider"></li>
    <li><a href="#">Пункт 3</a></li>
  </ul>
</div>

Если у элемента <a>, который предназначен для вызова выпадающего меню, Вам необходимо сохранить значение атрибута href, то вместо атрибута href="#" используйте атрибут data-target="#".

<div class="dropdown">
  <a data-target="#" href="page.html" data-toggle="dropdown" class="dropdown-toggle">
    Ссылка с выпадающим меню
    <b class="caret"></b>
  </a>
  <ul class="dropdown-menu">
    <li><a href="#">Пункт 1</a></li>
    <li><a href="#">Пункт 2</a></li>
    <li class="divider"></li>
    <li><a href="#">Пункт 3</a></li>
  </ul>
</div>

Добавление выпадающих меню с помощью JavaScript

Вы также можете добавить выпадающие списки к элементам веб-страницы с помощью JavaScript. Для этого Вам необходимо вызвать для ссылки или кнопки, используя её идентификатор (#) или имя класса (.), метод Bootstrap dropdown().

Примечание: Использование атрибута data-toggle="dropdown" является необходимым условием для добавления к компоненту выпадающего списка, независимо от того, вызываете ли вы dropdown (выпадающий список) через JavaScript или data-api (data attributes).

<script type="text/javascript">
$(document).ready(function(){
  $(".dropdown-toggle-js").dropdown();
});
</script>

<div class="dropdown">
  <a href="#" class="dropdown-toggle-js" data-toggle="dropdown">
    Ссылка с выпадающим меню
    <b class="caret"></b>
  </a>
  <ul class="dropdown-menu">
    <li><a href="#">Пункт 1</a></li>
    <li><a href="#">Пункт 2</a></li>
    <li class="divider"></li>
    <li><a href="#">Пункт 3</a></li>
  </ul>
</div>

Параметры и методы плагина dropdowns

Плагин dropdowns (выпадающий список) не имеет параметров, но зато имеет следующий метод: $().dropdown('toggle')

Этот метод показывает или скрывает (т.е. переключает из одного состояния в другое) выпадающее меню для указанного с помощью селектора (идентификатора или класса) элемента веб-страницы. Демонстрация этого метода рассмотрена в вышеприведенном примере.

События плагина dropdowns

Все события связанные с выпадающими списками выполняются на уровне родительского элемента .dropdown-menu (элемента, который управляет отображением или скрытием выпадающего меню). События и их описания представлены в следующей таблице:

<script type="text/javascript">
$(document).ready(function(){
    $(".dropdown-events").on("show.bs.dropdown", function(e){
        // Присвоить переменной textMenuItem текст ссылки
        var textMenuItem = $(e.relatedTarget).text();
        alert("Нажмите на OK для просмотра выпадающего меню для пункта: " + textMenuItem);
    });
});
</script>

<ul class="nav nav-pills">
  <li class="active"><a href="#">Пункт 1</a></li>
  <li><a href="#">Пункт 2</a></li>
  <li class="dropdown dropdown-events">
    <a href="#" data-toggle="dropdown" class="dropdown-toggle">
      Пункт 3
      <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
      <li><a href="#">Подпункт 1</a></li>
      <li><a href="#">Подпункт 2</a></li>
      <li class="divider"></li>
      <li><a href="#">Подпункт 3</a></li>
    </ul>
  </li>
  <li class="dropdown pull-right dropdown-events">
    <a href="#" data-toggle="dropdown" class="dropdown-toggle">
      Пункт 4
      <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
      <li><a href="#">Подпункт 1</a></li>
      <li><a href="#">Подпункт 2</a></li>
      <li class="divider"></li>
      <li><a href="#">Подпункт 3</a></li>
    </ul>
  </li>
</ul>