На этом уроке мы научимся добавлять выпадающие меню к различным элементам веб-страницы.

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

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

Элемент меню с выпадающим списком
<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:

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

На следующем примере показан процесс добавления выпадающих списков к кнопкам:

<div class="btn-group">
  <button type="button" data-toggle="dropdown" class="btn btn-default 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>

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

<div class="btn-group">
  <button type="button" class="btn btn-default">Кнопка</button>
  <button type="button" data-toggle="dropdown" class="btn btn-default 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>

Чтобы изменить размеры кнопок с выпадающим списком Вы можете воспользоваться классами 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 к этому родительскому элементу.

С помощью 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. Для этого Вам необходимо вызвать для ссылки или кнопки, используя её идентификатор (#) или имя класса (.), метод 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 (выпадающий список) не имеет параметров, но зато имеет следующий метод: $().dropdown('toggle')

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

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

Событие Описание
show.bs.dropdown Это событие срабатывает сразу после вызова метода show (показать). Элемент <a>, который управляет отображением или скрытием выпадающего списка для этого события, доступен через свойство relatedTarget.
shown.bs.dropdown Это событие срабатывает, когда выпадающий список становится видимым для пользователя (т.е. когда выполнены все CSS стили, необходимые для отображения выпадающего списка).
hide.bs.dropdown Данное событие срабатывает сразу же после вызова метода hide (скрыть). Элемент <a>, который управляет отображением или скрытием выпадающего списка для этого события, доступен через свойство relatedTarget
hidden.bs.dropdown Это событие срабатывает, когда выпадающий список был окончательно скрыт от пользователя (т.е. когда выполнены все CSS стили, необходимые для скрытия выпадающего списка).
<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>
Событие, которые срабатывает сразу после вызова метода show