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

Александр Мальцев
Александр Мальцев
158K
96
Содержание:
  1. Что такое выпадающий список
  2. Кнопка с выпадающим меню
  3. Выпадающие списки для кнопок через разделитель
  4. Выпадающие меню для кнопок, объединенных в группу
  5. Создания выпадающего меню, открывающегося вверх
  6. Создание выпадающих меню с помощью Twitter Bootstrap
  7. Выпадающие списки в навигационном меню (navbar)
  8. Выпадающие списки в навигационных панелях (navs)
  9. Добавление выпадающих меню (Dropdowns) с помощью Data Attributes
  10. Добавление выпадающих меню с помощью JavaScript
  11. Комментарии

В этой статье рассмотрим, как в 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>
Bootstrap 3 - Кнопки с выпадающими списками

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

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

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

Bootstrap 3 - Выпадающие списки для кнопок разного размера

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

На следующем примере показана возможность добавления выпадающего меню для кнопки, которая находится в группе кнопок (.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>
Bootstrap 3 - Выпадающие меню для кнопок, объединенных в группу

Для создания кнопок сгруппированных вертикально достаточно изменить класс .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>
Bootstrap 3 - Выпадающие меню для кнопок сгруппированных вертикально

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

Вы можете создать выпадающее меню, открывающееся вверх от родительского элемента. Для этого необходимо добавить дополнительный класс .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>
Bootstrap 3 - Выпадающее меню, открывающееся вверх

Создание выпадающих меню с помощью 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>
Bootstrap 3 - Выпадающие списки в Navbar

Выпадающие списки в навигационных панелях (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>
Bootstrap 3 - Выпадающие списки в Nav Bootstrap 3 - Выпадающие списки в Nav Tabs

Добавление выпадающих меню (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>
Bootstrap 3 - Ссылка с выпадающим меню

Если у элемента <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 (элемента, который управляет отображением или скрытием выпадающего меню). События и их описания представлены в следующей таблице:

Событие Описание
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

Комментарии:

  1. Владимир
    13 ноября 2019, 20:19
    Где нажать, чтобы отписаться от рассылки?
    1. Александр Мальцев
      14 ноября 2019, 02:50
      От комментариев в этой теме? Если да, то нужно нажать на галочку расположенную под заголовком «Комментарии».
      1. Владимир
        14 ноября 2019, 08:20
        Благодарю!
    2. Nik
      12 ноября 2019, 12:38
      Александр здравствуйте! Подскажите пожалуйста в чем моя ошибка, есть две выпадающие кнопки со списком, но почему то при клике на одной из них, второй выпавший список остается. (т.е оба открыты) Только пока не кликнешь где нибудь рядом или по самой кнопке. Что то в скрипте не правильно? И как сделать чтобы открыл один список, кликнул по второй кнопке первый закрылся? Вот код:
      <a class="dropdown-toggle" data-toggle="dropdown">Меню</a>
      <ul class="dropdown">
      <li><a href="#">Один</a></li>
      </ul>
      
      Это скрипт:
      <script>   
      $(function() {
      $('.dropdown-toggle').click(function(){ 
      $(this).next('.dropdown').toggle();
      });
      $(document).click(function(e) { 
      var target = e.target; 
      if (!$(target).is('.dropdown-toggle') && !$(target).parents().is('.dropdown-toggle')) {  
      $('.dropdown').hide();
      }
      });
      });
      </script>
      
      Вопрос не по теме, как делать у вас на сайте в комментариях, чтобы код красиво показывался?
      1. Александр Мальцев
        12 ноября 2019, 15:03
        Привет! В этом коде это действие не выполняется.
        Для этого нужно в коде это прописать:
        $(document).click(function (e) {
          var target = e.target;
            if (!$(target).is('.dropdown-toggle') && !$(target).parents().is('.dropdown-toggle')) {
              $('.dropdown').hide();
            }
            // если нажал на элемент с выпадающим список, то выполняй следующее...
            if ($(target).is('.dropdown-toggle')) {
              // 1. получить dropdown связанный с .dropdown-toggle
              var thisDropdown = $(target).next('.dropdown');
              // 2. найти все .dropdown и исключить из него .dropdown связанный с текущим .dropdown-toggle; скрыть их
              $('.dropdown').not(thisDropdown).hide();
            }
          });
        });
        
        Красиво — это чтобы код раскрашивался. В комментариях отключил эту возможность. Когда комментариев много и кода тоже, то это утяжеляет страницу. А выделение блоков с кодами в комментариях сейчас в CSS добавлю.
        1. Nik
          12 ноября 2019, 17:45
          К сожалению с $('.dropdown').not(thisDropdown).hide(); не работает… А как можно использовать .removeClass() в данном случае? Может использовать show вместо hide? Честно говоря я в тупике, никак до меня это не доходит…
          1. Nik
            12 ноября 2019, 18:13
            Вот тут пример — jsfiddle.net/wLfjk5do/
            1. Александр Мальцев
              13 ноября 2019, 13:39
              Ага, в связке с Bootstrap 3 это код работать не будет.
              Тогда так:
              $('.menu2').on('show.bs.dropdown', function (e) {
                var thisDropdown = $(this).find('.dropdown');
                $('.dropdown').not(thisDropdown).hide();
              });
              
              Ссылка на пример: jsfiddle.net/itchief/pfm6w53d/
              1. Nik
                13 ноября 2019, 13:59
                Спасибо! У меня тут вопрос чуть не по теме, но в тоже время и по теме. Не подскажите что почитать по javascript, для начинающих, чтобы легко было понимать это? Понимаю что нужна повседневная практика, но какие-то основы ведь нужны. Сейчас столько литературы что утонуть можно.
                1. Александр Мальцев
                  13 ноября 2019, 14:58
                  Начните с синтаксиса языка, после этого переходите к DOM, старайтесь не спешить, разбирайтесь что написано. Обязательно практикуйтесь. При выполнении практики используйте консоль и научитесь пользоваться отладчиком в браузере.
                  Для изучения выбирайте то, что подходит. Если нравятся книги, то используйте их. Если книги читать не интересно, то читайте статьи и разбирайтесь по ним.
                  1. Nik
                    14 ноября 2019, 14:20
                    Понял, спасибо.
                    Еще вопросик по верхнему примеру, добавил к элементу в скрипте — класс active, а как сделать чтобы класс актив исчезал при клике в любом месте экрана, а не только по кнопке?
                    Пример — jsfiddle.net/yvhrpg0u/
                    1. Александр Мальцев
                      14 ноября 2019, 14:30
                      Данный класс необходимо просто удалить:
                      $('.dropdown-toggle').removeClass('active');
                      
                      Пример: jsfiddle.net/itchief/26owuhxt/
                      1. Nik
                        14 ноября 2019, 14:58
                        Не совсем понял насчет удалить, возможно вы имели ввиду добавить?
                        Вот сюда, после hide()
                        $(document).click(function (e) {
                          var target = e.target;
                            if (!$(target).is('.dropdown-toggle') && !$(target).parents().is('.dropdown-toggle')) {
                              $('.dropdown').hide();
                            <-----сюда----->
                            }
                        
                        1. Александр Мальцев
                          14 ноября 2019, 15:03
                          Да, необходимо добавить этот код, который при выполнении удалит класс active у элемента .dropdown-toggle :)
                          1. Nik
                            14 ноября 2019, 15:04
                            Дошло до меня)))) Спасибо огромное!
      2. МэриЭнн
        17 июля 2019, 09:59
        Добрый день, внимательно прочитала статью, но все-таки не смогла решить свою проблему.
        У меня есть меню, в котором не работает родительский пункт. Пока что смогла настроить выпадающее меню при наведении и ссылки в нем работают как надо. Но непременно нужно сделать родительский пункт кликабельным. Приведенный вами скрипт загружала, но он не сработал. допуская, что вставляла не туда или не так.


        вот код из header.php, могу скопировать любой нужный код из других файлов
        <?php if (has_nav_menu('primary') || is_active_sidebar('navbar-right')) { ?> 
                        <div class="row main-navigation">
                            <div class="col-md-12">
                                <nav class="navbar navbar-expand-lg navbar-light bg-light">
                                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#bootstrap-basic4-topnavbar" aria-controls="bootstrap-basic4-topnavbar" aria-expanded="false" aria-label="<?php esc_attr_e('Toggle navigation', 'bootstrap-basic4'); ?>">
                                        <span class="navbar-toggler-icon"></span>
                                    </button>	
                                    <div id="bootstrap-basic4-topnavbar" class="collapse navbar-collapse">
        							<?php 
                                        wp_nav_menu(
                                            array(
                                                'depth' => '2',
                                                'theme_location' => 'primary', 
                                                'container' => false, 
                                                'menu_id' => 'bb4-primary-menu',
                                                'menu_class' => 'navbar-nav mr-auto', 
                                                'walker' => new \BootstrapBasic4\BootstrapBasic4WalkerNavMenu()
                                            )
                                        ); 
                                        ?> 
                                        <div class="float-md-right">
                                            <?php dynamic_sidebar('navbar-right'); ?> 
                                        </div>
                                        <div class="clearfix"></div>
                                    </div><!--.navbar-collapse-->
                                    <div class="clearfix"></div>
                                </nav>
                            </div>
                        </div><!--.main-navigation-->
                        <?php } else { ?> 
                        <!-- the navigation is skipped due to there is no menu or active widgets on navbar-right. -->
                        <?php }// endif; ?> 
        1. Александр Мальцев
          20 июля 2019, 14:58
          Должен работать.
          Если у вас выпадающий список оформлен с использованием button, то уберите в скрипте a:
          $(function() {
              $('.dropdown .dropdown-toggle').click(function() {
                  location.href = $(this).attr('href');
              });
          });
          
          Пример можно посмотреть здесь.
        2. sailion
          16 марта 2018, 21:15
          Подскажите, вот есть выпадающее меню (dropdown) в нем 15 ссылок, стандартно при раскрытии, имеется 1 колонка и все ссылки находятся длинным столбиком вниз. Вопрос: как сделать так чтобы при раскрытии меню был не один столбик и 15 ссылок, а три столбца по 5 ссылок, т.е нажал на меню и отобразилось это компактное окошко в ширину с тремя столбцами???
          1. Александр Мальцев
            23 марта 2018, 14:01
            Можно создать разметку с помощью классов сетки.
            Например, так.
          2. marta_i
            29 апреля 2017, 09:35
            Как всегда отличный материал. Огромное спасибо за труд. Помогите мне, хотя бы мыслью, где искать ошибку? На сайте меню вида:
            			<div class="navigacija">
            				<div class="nav-outer">	
            					<div class="container">
            						<nav class="navbar navbar-default" role="navigation">
            							<div class="navbar-header">
            								<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
            									<span class="icon-bar"></span>
            									<span class="icon-bar"></span>
            									<span class="icon-bar"></span>
            								</button>
            								<a class="logo" href="#"><img src="images/logo1@2x.png"></a>
            							</div>
            							<div class="collapse navbar-collapse navbar-ex1-collapse">
            								<ul class="nav navbar-nav pull-right">
            									<li 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 class="divider"></li>
            											<li><a href="#">Страница 2</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="#">Страница 1</a></li>
            											<li><a href="#">Страница 2</a></li>
            											<li><a href="#">Страница 3</a></li>
            											<li><a href="#">Страница 4</a></li>
            											<li><a href="#">Страница 5</a></li>
            											<li><a href="#">Страница 6</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="#">Страница 1</a></li>
                                                        <li class="divider"></li>
                                                        <li><a href="#">Страница 2</a></li>
                                                    </ul>
                                                </li>
            								</ul>
            							</div>
            						</nav>
            					</div>
            				</div>
            			</div>
            
            На десктопе все отлично 1 рис. А на мобилке начинается какой-то треш 2 рис. При нажатии на меню оно выпадает, когда нажимаешь, допустим на ПРОЕКТЫ то подпункты заливаются цветом ссылки и не работают, интересно, что последний пункт КОНТАКТЫ работает как должен, остальные нет.
            Подскажите где искать, что редактировать?

            itchief.ru/assets/uploadify/8/1/5/8150b92d73237359e031a983dfa5fa3f.jpg Мобильный вид
            itchief.ru/assets/uploadify/6/5/6/6565cc535cc4ebfb0a007545e70939a8.jpg Десктопный вид
            1. Владимир
              29 апреля 2017, 15:03
              Для начала нужно показывать стили — вы же о них спрашиваете. А вы показываете голую разметку.
              1. marta_i
                29 апреля 2017, 15:17
                Думаю, что дело в них:

                .nav-outer {
                background-color: #041931;
                }

                .navbar {
                border-radius: 0;
                border:none;
                margin-bottom: 0px!important;
                }

                .navbar-default {
                background-color: #041931;
                border: none;
                }

                .navbar-header {
                border: none;
                padding: 0;
                }

                .navbar-default .navbar-collapse {
                border-top: none!important;
                padding: 0!important;
                box-shadow: none;
                }

                .logo img {
                height: 33px;
                width: 134px;
                float: left;
                margin-top: 13px;
                margin-left: 15px;
                }

                .navbar-nav {
                list-style-type: none;
                text-align: center;
                float: right;
                border: none;
                }

                .navbar-nav li a {
                font-family: 'arial';
                font-weight: 400;
                text-transform: uppercase;
                text-decoration: none;
                font-size: 14px;
                color: white !important;
                padding: 15px 13px 16px;
                }

                .navbar-nav li a:hover, .navbar-nav li a.linkhover{
                text-decoration: none;
                font-size: 14px;
                background-color: #a5b9be!important;
                }

                .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
                background-color: #a5b9be;
                color: #fff;
                }

                .navbar-toggle .icon-bar {
                background-color: #041931;
                border-radius: 1px 1px 1px 1px;
                display: block;
                height: 1px;
                width: 10px;
                margin: 0 auto;
                }

                .navbar-toggle {
                background-color: #FF3B09;
                border: none;
                -moz-border-radius: 5px;
                -webkit-border-radius: 5px;
                -o-border-radius: 5px;
                border-radius: 5px;
                margin: 10px 0;
                right: 10px;
                width: 30px;
                height: 30px;
                }

                .navbar-default .navbar-toggle .icon-bar {
                background-color: #fff;
                }

                .navbar-default .navbar-toggle:hover {
                background-color: #041931;
                }

                .navbar-default .navbar-toggle:focus {
                background-color: #041931;
                }

                .dropdown-menu {
                background-color: #041931;
                }
                1. Владимир
                  29 апреля 2017, 16:27
                  Давайте смотреть не просто на кусок кода, а на кусок кода в действии. При просьбе о помощи с кодом, на форумах типа stackowerflow, toster и прочих, хорошими манерами считается выкладывать код на спецсервисах Codepen или всяких bin'ах. Давайте так сделаем? Мало кому захочется запускать окружение ради решения вашей проблемы. А так дали ссылку — и проблема уже видна.
                  http://codepen.io
                  jsbin.com
                  jsfiddle.net
                  — ----------------------------------------------------------
                  1. marta_i
                    29 апреля 2017, 17:13
                    Может архивом? Я ни с одним из них не работаю.
                    1. Александр Мальцев
                      01 мая 2017, 16:42
                      Это делается очень просто. Вот, например, имеется заготовка: jsfiddle.net/itchief/ktb3tep4/. К ней уже подключены jQuery и Bootstrap 3.
                      Делаете копию заготовки (кнопка Fork) и вставляете в неё ваш код HTML и CSS. Нажимаете кнопку Run и видите результат. Получается «живой» пример. Если в нём что-то не работает и вы не знаете как это исправить, то можете дать на него ссылку. Так будет больше желающих вам помочь.
                      1. Владимир
                        01 мая 2017, 18:08
                        Плюсанул за экономию времени — как раз надо этим сервисом воспользоваться, а подключать все было влом)))
                      2. Владимир
                        29 апреля 2017, 18:02
                        Можете и архив выложить и ждать случая, когда какой-нибудь заскучавший и безработный верстальщик от нечего делать скачает и распакует ваш архив.
                        Я ни с одним из них не работаю
                        А надо бы.
              2. Антон
                17 апреля 2017, 18:27
                Здравствуйте!
                Подскажите, пожалуйста, можно ли варьировать ширину выпадающего списка и как это делать?
                <div class="navbar nav-collapse collapse js-navbar">
                  
                <div class="moduletable span5">
                <ul class="nav menu nav-pills">
                  
                  <li class="item-101 default current active">
                <a href="/JoomlaProject/index.php">Главная</a>
                </li>
                <li class="item-118">
                <a href="/JoomlaProject/index.php/o-kolledzhe">О колледже</a>
                </li>
                <li class="item-119">
                <a href="/JoomlaProject/index.php/novosti">Новости</a>
                </li>
                  
                <li class="item-120">
                <a href="/JoomlaProject/index.php/kontakty">Контакты</a>
                </li>  
                   
                  
                  <li class="dropdown">
                          
                    <a id="drop1"  href="/JoomlaProject/index.php/cvedeniya-ob-obrazovatelnoj-organizatsii" class="dropdown-toggle" data-toggle="dropdown" style="width=450px">
                            Сведения об образовательной организации </a>
                          <ul style="width=450px" class="nav-stacked">
                                       
                            <li><a href="/JoomlaProject/index.php/cvedeniya-ob-obrazovatelnoj-organizatsii/basic">Основные сведения</a></li>
                             
                            <li><a href="/JoomlaProject/index.php/cvedeniya-ob-obrazovatelnoj-organizatsii/structure">Структура и органы управления образовательной организацией</a></li>
                              
                            <li><a href="/JoomlaProject/index.php/cvedeniya-ob-obrazovatelnoj-organizatsii/docs">Документы</a></li>
                             
                            <li><a href="/JoomlaProject/index.php/cvedeniya-ob-obrazovatelnoj-organizatsii/education">Образование</a></li>
                           
                            <li><a href="/JoomlaProject/index.php/cvedeniya-ob-obrazovatelnoj-organizatsii/fgos">Образовательные стандарты</a></li>
                           
                            <li><a href="/JoomlaProject/index.php/cvedeniya-ob-obrazovatelnoj-organizatsii/management">Руководство. Педагогический состав</a></li>
                            <li><a href="/JoomlaProject/index.php/cvedeniya-ob-obrazovatelnoj-organizatsii/mto">Материально-техническое обеспечение и оснащённость образовательного процесса</a></li>
                            <li><a href="/JoomlaProject/index.php/cvedeniya-ob-obrazovatelnoj-organizatsii/commerce">Платные образовательные услуги</a></li>
                            <li><a href="/JoomlaProject/index.php/cvedeniya-ob-obrazovatelnoj-organizatsii/stip">Стипендии и иные виды материальной поддержки</a></li>
                            <li><a href="/JoomlaProject/index.php/cvedeniya-ob-obrazovatelnoj-organizatsii/fhd">Финансово-хозяйственная деятельность</a></li>
                            <li><a href="/JoomlaProject/index.php/cvedeniya-ob-obrazovatelnoj-organizatsii/vacancy">Вакантные места для приёма (перевода)</a></li>
                          
                            </ul>
                        </li>
                  
                </ul>
                Если список не расширить, то довольно длинные названия пунктов переносятся по строкам и список не входит на страницу…
                1. Владимир
                  17 апреля 2017, 18:58
                  Куча разметки и ни слова из оформления…
                  Используйте значение ширины
                  width: -moz-fit-content; 
                  width: -webkit-fit-content; 
                  width: fit-content
                  и запрет переноса слов
                  1. Антон
                    17 апреля 2017, 19:13
                    Здравствуйте! Спасибо! Уточните, пожалуйста, аргументом какого тега должна быть ширина width и как запретить перенос?
                    1. Владимир
                      17 апреля 2017, 19:23
                      Цитата с одного известного сайта:
                      Находясь где-то между max-content и min-content, значение fit-content может быть очень полезным, особенно при создании отзывчивых дизайнов.

                      Значение min-content отлично подходит для выравнивания блоков с контентом с неизвестной шириной, например, навигационного меню на сайте.
                      Что если бы мы захотели сделать так, чтобы меню не занимало всю ширину родительского элемента, а, наоборот, сжималось до минимально возможной ширины, без переноса любой из ссылок на новую строку? Добиться этого нам поможет значение fit-content
                      Ну а про word-wrap не знать верстальщику — стыдно
                      1. Антон
                        17 апреля 2017, 19:27
                        Мне было бы очень стыдно, будь я сколь-нибудь профессионалом.
                        Спасибо Вам!
                2. Вадим
                  20 марта 2017, 20:25
                  Доброго дня! Прошу извинить если уже было…
                  Как задать всю ширину род.элемента группе:
                  Группа
                  1. Владимир
                    20 марта 2017, 21:16
                    Пардоньте, а вам что-нибудь говорит словосочетание «Инструменты разработчика»? Без этого даже не думайте пытаться изучать чужой код и писать свой.
                    1. Вадим
                      20 марта 2017, 21:34
                      Ccори… не обернул в код… как «растянуть» во всю ширину род.элемента данную группу?
                      <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>
                      1. Александр Мальцев
                        21 марта 2017, 12:29
                        Оберните ваш код в этот блок:
                        <div class="btn-group btn-group-justified">
                          <!-- Ваш код-->
                        </div>
                        
                        1. Вадим
                          21 марта 2017, 14:25
                          Александр! Я и хотел простым вариантом без доп. стилей по феншую :) так и сделал вчера… громоздко конечно все получилось, но работает :) Расщепленную кнопку может попробовать для красоты? :)


                          1. Владимир
                            21 марта 2017, 12:59
                            Что бл… за болезнь — все в блоки заворачивать? вы все еще в html 4 верстаете чтоли? Тогда да — это архиправильное решение. И еще пару оберток добавьте — чтоб наверняка.
                          2. Владимир
                            20 марта 2017, 22:07
                            вам что нужно расстянуть? список? Элементы списка? кнопку? Родительский див?
                            1. Вадим
                              20 марта 2017, 22:16
                              кнопку
                              1. Владимир
                                20 марта 2017, 23:57
                                ну так и задайте кнопку в 100% ширины. Только в начале посмотрите — задана ли ширина у кнопки.
                                П.С. Вы же все по фэншую делаете? Сначала подключены стили БТ3, и только после него ваш файл стилей, которым вы оформляете сайт.
                      2. Тимофей
                        29 ноября 2016, 13:27
                        И еще вопрос, создал шаблон на html, все работает гуд, прикрутил его к joomla 3.6.4 и теперь при нажатии на кнопку меню не открывается, а открываются все при наведении, в чем может быть проблема? То есть я нажал на кнопку и после при наведении на любую другую выкатывается подменю, как щелкну в пустое место, все по новой.
                        1. Тимофей
                          29 ноября 2016, 09:09
                          Добрый день, подскажите пожалуйста, как сделать, чтоб выпадающее меню удлинялось вправо, а не влево?
                          1. Александр Мальцев
                            30 ноября 2016, 10:25
                            Добавить к классу dropdown-menu класс dropdown-menu-right:
                            <ul class="dropdown-menu dropdown-menu-right">
                              ...
                            </ul>
                            
                          2. Виктор
                            28 октября 2016, 11:23
                            Здравствуйте, Александр!

                            Помогите пожалуйста разобраться с выпадающим меню на bootstrap 2, сайт на modx.

                            Меню работает: всплывают вложенные элементы при наведении, но не работает переход по ссылке на родительский элемент. Хочу сделать что бы эта ссылка работала. Конфликта с мобильными пользователями не будет, т.к. для них есть отдельное меню.


                            Код меню:
                            <li class="dropdown [[+wf.classnames]]">
                                <a class="dropdown-toggle" data-toggle="dropdown" href="[[+wf.link]]">[[+wf.linktext]] <b class="caret"></b></a>
                                [[+wf.wrapper]]
                            </li>
                            Какие стили нужно подключить в CSS?
                            .dropdown:hover > .dropdown-menu {
                            display: block;
                            }
                            Вот этот добавлен, но ссылка всё равно не активна.
                            Простите, но я совсем новичок в этой теме, надеюсь на вашу помощь :(
                            1. Александр Мальцев
                              30 октября 2016, 14:00
                              Здравствуйте, Виктор.
                              1. Сделать меню открывающимся при наведении. Для этого добавить в CSS следующий код:
                              .dropdown:hover .dropdown-menu {
                                display: block;
                                margin-top: 0;
                              }
                              
                              2. Добавить на станицу скрипт, который будет при нажатию на пункт, переходит по адресу указанному в href:
                              $(function() {
                                $('.dropdown a.dropdown-toggle').click(function() {
                                  location.href = $(this).attr('href');
                                });
                              });
                              
                              1. sagan
                                24 февраля 2017, 14:25
                                Александр, понравился Ваш ответ на вопрос, и сразу же у меня возник вопрос: при клике я перехожу по ссылке, так как Вы и указали, при hover, открывается список выпадающий, но как это сделать на мобильных? Переход по ссылке — понятно, а вот hover — отсутствует. Не могли бы Вы подсказать, как правильно в этом случае поступить?
                                1. Александр Мальцев
                                  24 февраля 2017, 15:21
                                  Спасибо, но в этом случае лучше использовать следующий вариант кнопки (split):
                                  <div class="btn-group">
                                    <a href="https://yandex.ru" class="btn btn-danger">Yandex</a>
                                    <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                      <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu">
                                      <li><a href="https://www.google.ru">Google</a></li>
                                      <li><a href="https://www.bing.com/">Bing</a></li>
                                    </ul>
                                  </div>
                                  
                                  В этом случае её можно будет использовать как на смартфонах, так и на десктопах.
                                  1. sagan
                                    24 февраля 2017, 15:30
                                    Благодарю за оперативный ответ, удачи!
                                2. Виктор
                                  31 октября 2016, 09:14
                                  Спасибо большое, решил вопрос!
                                  Меню уже и так открывалось при наведении, а вот скрипт очень помог!
                                  Единственное, как для новичка, можно было указать что этот скрипт нужно добавить на страницу в тело скрипта:
                                  <script type="text/javascript">
                                  $(function() {
                                    $('.dropdown a.dropdown-toggle').click(function() {
                                      location.href = $(this).attr('href');
                                    });
                                  });
                                  </script>
                              2. Булат
                                01 сентября 2016, 07:03
                                Привет, из за чего список выпадает только со второго нажатия на кнопку, а после начинает нормально срабатывать. Но если снова перезагрузить страницу, то он опять срабатывает только со второго раза, а потом опять нормально работает.
                                <div class="dropdown">
                                      <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" onclick = "$('.dropdown-toggle').dropdown();">
                                        Dropdown Example
                                        <span class="caret"></span>
                                      </button>
                                      <ul class="dropdown-menu">
                                        <li><a href="#">HTML</a></li>
                                        <li><a href="#">CSS</a></li>
                                        <li><a href="#">JavaScript</a></li>
                                      </ul>
                                    </div>
                                
                                Если же использовать
                                $('.dropdown-toggle').dropdown('toggle');
                                То список выпадает с первого раза, но после того как он закрылся, больше не открывается при нажатии на кнопку.
                                1. Александр Мальцев
                                  03 сентября 2016, 05:46
                                  Используйте атрибут data-toggle или JavaScript.
                                  Удалите из строчки onclik:
                                  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
                                  
                                2. Владимир
                                  28 августа 2016, 07:20
                                  Александр, здравствуйте! Благодарю за вашу помощь другим в освоении бутстрапа. Надеюсь, теперь сможете помочь и мне. Можете подсказать — как сделать появление подменю из дропдауна не по клику, а при наведении?
                                  1. Александр Мальцев
                                    28 августа 2016, 14:01
                                    А если просто обычный dropdown, который будет вызываться по наведению, то так.
                                    HTML-код:
                                    <div class="dropdown pull-left">
                                      <button class="btn btn-warning" type="button">
                                        Поднесите курсор к кнопке</button>
                                      <ul class="dropdown-menu">
                                        <li><a href="#">Пункт 1</a></li>
                                        <li><a href="#">Пункт 2</a></li>
                                        <li><a href="#">Пункт 3</a></li>
                                      </ul>
                                    </div>
                                    
                                    JavaScript-код:
                                    <script>
                                    $(function(){
                                      $('.dropdown').hover(
                                        function() {
                                          $(this).find('.dropdown-menu').stop(true, true).delay(100).fadeIn(300);
                                        }, 
                                        function() {
                                          $(this).find('.dropdown-menu').stop(true, true).delay(100).fadeOut(300);
                                        }
                                      );
                                    });
                                    </script>
                                    
                                    1. Владимир
                                      28 августа 2016, 14:29
                                      У меня получилось проще

                                      .dropdown:hover > .dropdown-menu {
                                      display: block;
                                      }

                                      добавил это правило в стили
                                    2. Александр Мальцев
                                      28 августа 2016, 13:57
                                      Здравствуйте, Владимир.
                                      Если выхотите сделать dropdown с hover подпунктами, то необходимо выполнить следующие действия.
                                      Добавить в свой файл CSS следующий код:
                                      .dropdown-submenu {
                                        position:relative;
                                      }
                                      .dropdown-submenu>.dropdown-menu {
                                        top:0;left:100%; margin-top:-6px; margin-left:-1px; -webkit-border-radius:0 6px 6px 6px; -moz-border-radius:0 6px 6px 6px; border-radius:0 6px 6px 6px;
                                      }
                                      .dropdown-submenu:hover>.dropdown-menu {
                                        display:block;
                                      }
                                      .dropdown-submenu>a:after {
                                        display:block; content:" "; float:right; width:0; height:0; border-color:transparent; border-style:solid; border-width:5px 0 5px 5px; border-left-color:#cccccc; margin-top:5px; margin-right:-10px;
                                      }
                                      .dropdown-submenu:hover>a:after {
                                        border-left-color:#ffffff;
                                      }
                                      .dropdown-submenu.pull-left {
                                        float:none;
                                      }
                                      .dropdown-submenu.pull-left>.dropdown-menu {
                                        left:-100%; margin-left:10px; -webkit-border-radius:6px 0 6px 6px; -moz-border-radius:6px 0 6px 6px; border-radius:6px 0 6px 6px;
                                      }
                                      
                                      HTML-код dropdown с подменю:
                                      <div class="dropdown pull-left">
                                        <button class="btn btn-warning dropdown-toggle" type="button" data-toggle="dropdown">Кнопка <span class="caret"></span></button>
                                        <ul class="dropdown-menu">
                                          <li><a href="#">Пункт 1</a></li>
                                          <li><a href="#">Пункт 2</a></li>
                                          <li><a href="#">Пункт 3</a></li>
                                          <li class="dropdown-submenu">
                                            <a href="#">Пункт 4 с подменю</a>
                                            <ul class="dropdown-menu">
                                              <li><a href="#">Пункт 4.1</a></li>
                                              <li><a href="#">Пункт 4.2</a></li>
                                            </ul>
                                          </li>
                                        </ul>
                                      </div>
                                      
                                    3. Антон
                                      20 июня 2016, 20:52
                                      Доброго времени суток. Подскажите, пожалуйста, как растянуть группу из кнопки и выпадающего меню по размеру родительского элемента, при этом необходимо, чтобы они имели разные размеры?
                                      Если использовать .btn-block, то обе кнопки растягиваются по ширине родительского элемента в две строчки, а .btn-group-justified делает кнопки одинаковых размеров, равных половине ширины родительского элемента.
                                      <div class="col-sm-4 col-sm-offset-4">
                                       	<div class="btn-group btn-block">
                                              	<button type="button" class="btn btn-default  btn-block">Select Year</button>
                                                      <button type="button" data-toggle="dropdown" class="btn btn-default dropdown-toggle btn-block">
                                                                    <span class="glyphicon glyphicon-triangle-bottom" aria-hidden="true"></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>  
                                      
                                      1. Александр Мальцев
                                        21 июня 2016, 13:22
                                        Попробуйте так:
                                        <div class="col-sm-4 col-sm-offset-4">
                                          <div class="btn-group btn-block">
                                            <button type="button" class="btn btn-default" style="width: calc(100% - 32px);">Select Year</button>
                                            <button type="button" data-toggle="dropdown" class="btn btn-default dropdown-toggle">
                                              <span class="glyphicon glyphicon-triangle-bottom" aria-hidden="true"></span>
                                            </button>
                                            ...
                                          </div>
                                        </div>  
                                        
                                      2. Сергей
                                        24 мая 2016, 22:54
                                        Здравствуйте!
                                        Подскажите, пожалуйста, как сделать так, чтоб ширина кнопки для dropdown было равна ширине самого списка dropdown(ширина списка намного больше ширины кнопки). Изрыл весь интернет и не нашёл ответа на вроде простейший вопрос.
                                        1. Александр Мальцев
                                          21 июня 2016, 13:32
                                          Здравствуйте! А как можно узнать ширину раскрывающего списка, который ещё не открыт? А если не знаешь какая будет ширина, то как её можно установить.
                                        2. Jlaz
                                          03 мая 2016, 18:50
                                          Здравствуйте. В развёрнутом меню все списки открываются при наведении на соответствующий элемент, а также при клике работают ссылки для перехода на другие страницы. Просмотрев все решения так и не понял, как сделать так, чтобы в мобильном меню у каждого dropdown пункта были 2 кнопки, одна часть кнопки с назанием осуществляет переход на другую страницу, а другая часть — стрелочка осуществляет открытие списка. А самое главное чтобы при этом всём сохранить открытие списков при наведении в развёрнутом меню для пользователей ПК
                                          <div class="collapse navbar-collapse navbar-responsive-collapse">
                                          				<ul class="nav navbar-nav" style="width: max-content; ">
                                          					<li class="dropdown">
                                          					 	  <a data-target="#" href="about.html" class="dropdown-toggle" 	data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">О компании<span class="caret"></span></a>
                                          					<ul class="dropdown-menu">
                                          						<li>
                                          							<a href="business.html">Развитие</a>
                                          						</li>
                                          						<li>
                                          							<a href="news.html">Новости</a>
                                          						</li>
                                          					</ul>
                                          				</li>
                                          	<!-- /О компании -->
                                          
                                          
                                          
                                          1. Alena
                                            08 апреля 2016, 23:47
                                            Подскажите пожалуйста, можно ли сделать так что бы при клике на «шапку» выпадающего меню открывалась одна ссылка, а уже при клике на стрелочку и выборе подпункта открывались другие ссылки?
                                            1. Александр Мальцев
                                              09 апреля 2016, 17:08
                                              Используйте кнопки, в которых выпадающий список отделён от неё с помощью разделителя:
                                              <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>
                                              
                                            2. АлексейВитальевич
                                              25 февраля 2016, 00:46
                                              Спасибо Александру хочу сказать за его труд, почти всегда нахожу ответ на искомую задачу. шеф рулит )
                                              1. tweenfaster
                                                17 февраля 2016, 04:17
                                                Полезное дело делаете, Александр. В комментариях очень подробно помогаете. Спасибо.
                                                1. Oleg
                                                  13 февраля 2016, 10:22
                                                  Здравствуйте!
                                                  Подскажите пожалуйста как сделать чтобы в одном dropdown лежали 2 кнопки и 2 меню, при этом нужное меню всплывает при нажатии на нужную кнопку.
                                                  1. Александр Мальцев
                                                    14 февраля 2016, 14:17
                                                    Здравствуйте.
                                                    Посмотрите решение на jsFiddle:
                                                    _http://jsfiddle.net/itchief/bg280v1g/
                                                  2. Евгений
                                                    02 февраля 2016, 11:02
                                                    Спасибо!
                                                    1. Евгений
                                                      15 января 2016, 21:52
                                                      никакого результата, он все равно сам закрывается, мне нужно чтобы раскрывающий список не закрывался допустим при клике по контенту сайта, то есть нужно чтобы пользователь мог выбрать несколько флажков или радио кнопок
                                                      1. Александр Мальцев
                                                        17 января 2016, 08:40
                                                        Ну, сделайте тогда всё вручную.
                                                        1. Удалите у кнопки, открывающий список следующий атрибут:
                                                        data-toggle="dropdown"
                                                        
                                                        Теперь выпадающий список не будем сам открываться и закрываться…
                                                        2. Добавьте к этой кнопке идентификатор. Например, myMenu.

                                                        В итоге получилось:
                                                        <div class="dropdown">
                                                          <button class="btn btn-default" type="button" id="myMenu">
                                                            Меню
                                                            <span class="caret"></span>
                                                          </button>
                                                          <ul class="dropdown-menu" aria-labelledby="myMenu">
                                                          ...
                                                        
                                                        3. Добавить скрипт для управления этим меню:
                                                        $('#myMenu').click(function() {
                                                          // если список открыт, то закрыть его
                                                          // иначе открыть его
                                                          if ($(this).parent().hasClass('open')) {
                                                            $(this).parent().removeClass('open');
                                                          }
                                                          else {
                                                            $(this).parent().addClass('open');
                                                          }
                                                        });
                                                        
                                                        4. Ну и js скрипт для другой кнопке (закрыть):
                                                        //button5 - id кнопки закрыть
                                                        $('#button5').click(function(){
                                                          $('#myMenu').parent().removeClass('open');
                                                        });
                                                        
                                                      2. Евгений
                                                        15 января 2016, 11:36
                                                        Подскажите, как сделать, допустим у меня есть несколько параметров с отметками таких как флажки и радио кнопки в выпадающем списке, но при отметке одного параметра список закрывается, как сделать чтобы не закрывалась а допустим по кнопке закрыть она закрывалась?
                                                        1. Александр Мальцев
                                                          15 января 2016, 17:20
                                                          Написать скрипт на языке JavaScript:
                                                          //запретить всплытие события click для необходимых элементов
                                                          //например для элементов input и label расположенных в .dropdown-menu
                                                          //т.е. при клике мы запрещаем данному событию всплывать и оно не закрывает меню
                                                          $('.dropdown-menu input, .dropdown-menu label').click(function(e) {
                                                            e.stopPropagation();
                                                          });
                                                          //mymenu - id ссылки или кнопки, с помощью которой Вы хотите закрыть меню
                                                          $('#mymenu').click(function(e) {
                                                            //запрещаем всплытие события
                                                            e.stopPropagation();
                                                            //dropdownMenu1 - id ссылки или кнопки открывающей выпадающее меню
                                                            $('#dropdownMenu1').dropdown('toggle');
                                                          });
                                                          
                                                        2. Karssen
                                                          05 января 2016, 13:57
                                                          Не знаю что за баг это у Бутстрапа. Но в следующем коде осуществляется переход по ссылке при закрытии выпадающего меню. По какой причине не понятно.
                                                          <li class="dropdown dropdown-events">
                                                                                          <a data-toggle="dropdown" class="dropdown-toggle" data-target="#" href="lessons.html"><span class="fa fa-folder-open-o"></span> Уроки и статьи <b class="caret"></b></a>
                                                                                          <ul role="menu" class="dropdown-menu">
                                                                                              <li><a href="https://yandex.ru/search/?text=%D0%BE%D0%B9%D0%B3%D1%83%D0%BA%D0%BD&lr=959&clid=2121033">Windows</a></li>
                                                                                              <li><a href="#">Mac OS</a></li>
                                                                                              <li><a href="#">Linux</a></li>
                                                                                              <li><a href="#">Другие системы</a></li>
                                                                                          </ul>
                                                                                      </li>
                                                          $(".dropdown-events").on("hidden.bs.dropdown", function(e){
                                                          
                                                                  console.log(e.relatedTarget.textContent);
                                                          
                                                              });
                                                          1. Александр Мальцев
                                                            05 января 2016, 17:26
                                                            У Вас ошибка в коде JavaScript. Т.к. в этом событии Вы не можете обратиться к relatedTarget, из-за того что его просто нет. Там доступен только target. Ошибка в Вашем коде приводит к неправильной работе компонента…
                                                            Если Вам необходимо получить relatedTarget, то следует использовать hide.bs.dropdown:
                                                            $(".dropdown-events").on("hide.bs.dropdown", function(e){
                                                              console.log(e.relatedTarget.textContent);
                                                            });
                                                            
                                                          2. Виталий
                                                            23 декабря 2015, 22:12
                                                            Добрый день!
                                                            Подскажите, как вызвать показ выпадающего меню извне, т.е. не из того div, в котором это меню находится?
                                                            <div class="dropdown" id="div01">
                                                                <button id="dLabel01" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                                    Dropdown trigger
                                                                    <span class="caret"></span>
                                                                 </button>
                                                                 <ul class="dropdown-menu" aria-labelledby="dLabel01" id="drop01">
                                                                    <li>Menu1</li>
                                                                    <li>Menu2</li>
                                                                 </ul>
                                                                 <!-- Этот вызов работает -->
                                                                 <button data-toggle="dropdown" onclick="return $('.dropdown-toggle').dropdown();">Открыть 1 список</button>
                                                            </div>
                                                            
                                                            <!-- Этот вызов не работает -->
                                                            <button data-toggle="dropdown" onclick="return $('#dLabel01').dropdown('toggle');">Открыть 1 список</button>
                                                            
                                                            Если в меню сделать обработку выпадающего меню, то вторая кнопка тоже начинает работать, но relatedTarget=undefined. о_О
                                                                <script type="text/javascript">
                                                                    $(document).ready(function () {
                                                                        $('#div01').on('shown.bs.dropdown', function (e) {
                                                                            var o = e.relatedTarget;
                                                                            alert("Метод вызвал компонент: `" + o.textContent + "`");
                                                                        });
                                                                    });
                                                                </script>
                                                            
                                                            
                                                            1. Александр Мальцев
                                                              24 декабря 2015, 14:13
                                                              Просто добавив вызов метода .dropdown('toggle'). При этом не стоит забывать о всплытии событии…
                                                              Т.к. события по умолчанию всплывают. Об этом можете почитать в статье JavaScript — Всплытие события. Это необходимо сделать для того чтобы document не закрыл его, когда вы его открыли кнопкой.

                                                              Т.е. будет так:
                                                              <div class="dropdown" id="div01">
                                                                <button id="dLabel01" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                                  Dropdown trigger
                                                                  <span class="caret"></span>
                                                                </button>
                                                                <ul class="dropdown-menu" aria-labelledby="dLabel01" id="drop01">
                                                                  <li>Menu1</li>
                                                                  <li>Menu2</li>
                                                                </ul>
                                                                <button data-toggle="dropdown" class="myButton">Открыть 1 список</button>
                                                              </div>
                                                              <button data-toggle="dropdown" class="myButton">Открыть 1 список</button>
                                                              <script>
                                                              $('.myButton').click(function(e) {
                                                                //запретить всплытие события
                                                                e.stopPropagation();
                                                                $("#dLabel01").dropdown('toggle');
                                                              }); 
                                                              </script>
                                                              
                                                              1. Karssen
                                                                05 января 2016, 13:21
                                                                Подскажите возможна ли следующая реализация перехода по ссылке в выпадающем меню и какие у нее могут быть подводные камни.
                                                                <div class="dropdown  dropdown-events">
                                                                  <a href="page.html" class="dropdown-toggle">Ссылка с выпадающим меню<b class="caret"></b></a>
                                                                  <ul class="dropdown-menu">
                                                                  ...
                                                                  </ul>
                                                                </div>
                                                                <script type="text/javascript">
                                                                        $(document).ready(function () {
                                                                            $(".dropdown-events").on("hidden.bs.dropdown", function(e){
                                                                
                                                                              var href = $(e.relatedTarget).attr('href');
                                                                              location.href = href;
                                                                
                                                                           });
                                                                        });
                                                                    </script>
                                                                1. Александр Мальцев
                                                                  05 января 2016, 17:54
                                                                  1. В вашем коде у элемента a не хватает атрибута data-toggle со значением dropdown.
                                                                  <a href="page.html" data-toggle="dropdown" class="dropdown-toggle">Ссылка с выпадающим меню<b class="caret"></b></a>
                                                                  
                                                                  2. В скрипте ошибки, как в ниже приведённом примере. Правильно будет так:
                                                                  <script>
                                                                  $(document).ready(function () {
                                                                    $(".dropdown-events").on("hide.bs.dropdown", function(e){
                                                                      var href = $(e.relatedTarget).attr('href');
                                                                      location.href = href;
                                                                    });
                                                                  });
                                                                  </script>
                                                                  
                                                                  Здесь подводный камень один… При закрытии выпадающего списка осуществлять переход по ней. Как-то не совсем разумно. Надо хотя бы предупредить пользователя. Для чего это?
                                                                  Просто создайте кнопку и в выпадающем меню расположите все необходимые ссылки. Если Пользователю что-то понравится, то он нажмёт на неё и тем самым осуществит переход. А если нет, то закроет список и будет просматривать страницу дальше. А так бац и какой-то переход…
                                                                  Вот если бы Вы сделали раскрывающий список при наведении…
                                                                2. Виталий
                                                                  28 декабря 2015, 20:58
                                                                  Тогда по нажатию кнопки меню появляется и тут же закрывается опять.
                                                              2. Николай
                                                                21 октября 2015, 16:59
                                                                Спасибо Вам огромное, всё работает. По поводу бутстрапа всегда захожу только к Вам на сайт.
                                                                З.Ы. У Вас безумный футер, очень прикольною
                                                                1. Николай
                                                                  21 октября 2015, 13:54
                                                                  Добрый день, присоединяюсь к вопросу billy — как сделать так, что бы текст выбранного пункта выпадающего меню заменял текст в самой ссылке.
                                                                  Например в дропдауне Пункт 2 я выбираю «подпункт 3» и при выборе подпункта становится подпункт 3
                                                                  1. Александр Мальцев
                                                                    21 октября 2015, 16:22
                                                                    Добрый день, Николай!

                                                                    <div class="dropdown">
                                                                      <a href="#" 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>
                                                                    
                                                                    <script>
                                                                    $(".dropdown-menu li a").click(function(){
                                                                      $(this).parents(".dropdown").find('a:first').html($(this).text() + ' <span class="caret"></span>');
                                                                    });
                                                                    </script>
                                                                    
                                                                    1. Алексей
                                                                      29 марта 2016, 12:38
                                                                      Добрый день!
                                                                      Вы не подскажете, почему данный скрипт не работает на телефонах?
                                                                      На компах, планшетах всё норм.
                                                                      1. Александр Мальцев
                                                                        29 марта 2016, 13:36
                                                                        Какой браузер и телефон?
                                                                        Попробуйте его использовать так:
                                                                        <script type="text/javascript">
                                                                        $(function(){
                                                                          $(".dropdown-menu li a").click(function(){
                                                                            $(this).parents(".dropdown").find('a:first').html($(this).text() + ' <span class="caret"></span>');
                                                                          });
                                                                        });
                                                                        </script>
                                                                        1. Алексей
                                                                          29 марта 2016, 16:22
                                                                          Спасибо за ответ! Такой вариант тоже не работает(

                                                                          Samsung Galaxy Note 2
                                                                          Браузер Хром

                                                                          Вот этот код на компе работает, на телефоне не выскакивает даже алерт.
                                                                          Сайт — aleksey.tessellagrid3.com/alexey/ukinua.sam/#programme_description
                                                                          Выпадающее меню в поле регистрации.

                                                                          <script type="text/javascript">
                                                                              $(".dropdown-menu li a").click(function(){
                                                                                  alert("Спасибо за посещение!");
                                                                                  $(this).parents(".dropdown").find('a:first').html($(this).text() + ' <span class="caret"></span>');
                                                                              });
                                                                           </script>
                                                                          
                                                                          1. Александр Мальцев
                                                                            30 марта 2016, 12:34
                                                                            Скорее всего какая-то ошибка вылезает в скриптах.
                                                                            Попробуйте перенести этот код сразу после подключения библиотеки jQuery. А так по хорошему надо выловить инструкцию javascript которая приводит к ошибке и заключить её в try..catch, чтобы она не останавливала выполнение другой части кода.
                                                                            P.S. Открыл Ваш сайт у себя на смартфоне — всё ОК.
                                                                  2. billy
                                                                    19 октября 2015, 15:38
                                                                    а не подскажите начинающему специалисту, как это сделать можно?
                                                                    1. Александр Мальцев
                                                                      20 октября 2015, 16:56
                                                                      Работа с LocalStorage выглядит следующим способом:
                                                                      1. Сохранить значение в LocalStorage под определённым ключом
                                                                      2. Получить значение из LocalStorage по имени ключа

                                                                      Например:
                                                                      // после загрузки страницы
                                                                      $(document).ready(function () {
                                                                        // послы открытия выпадающего списка
                                                                        $('#myMenu').on('show.bs.dropdown', function () {
                                                                          // сохраняем текст первого пункта меню в переменную text
                                                                          var text = $('#myMenu ul.dropdown-menu li:first-child').text();
                                                                          // сохраняем это значение в LocalStorage. Имя ключа - myMenu
                                                                          localStorage.setItem("myMenu", text); //-> myMenu : "Значения 1 пункта";
                                                                        });
                                                                        // после загрузки страницы читаем значение myMenu
                                                                        // если оно не равно null, то
                                                                        if (localStorage.getItem("myMenu") != null) {
                                                                          // например, вставляем перед первым пунктом пункт, содержащий этот текст.
                                                                          // Получаем данный текст из LocalStorage по имени ключа с помощью метода getItem 
                                                                          $("<li>"+localStorage.getItem("myMenu")+"</li>").insertBefore("#myMenu ul.dropdown-menu li:first-child");
                                                                        }
                                                                      });
                                                                      
                                                                    2. Billy
                                                                      18 октября 2015, 19:18
                                                                      Спасибо, много различных вариантов представлено.
                                                                      Но нигде не могу найти как сделать следующим образом.
                                                                      Хочу прикрутить выпадающее меню к списку мобильных телефонов на сайте.
                                                                      Задача в следующем.
                                                                      На моем сайте в шашке есть номера телефонов, необходимо выпадающее меню, чтобы когда клиент из списка выбрал нужный номер и дальше перемещался по сайту, то этот выбранный номер не пропадал и все время был в списке.

                                                                      Все встречаемые мной варианты позволяли развернуть меню, выбрать номер, но когда открывал другую страницу номер становился на самый первый по списку, т.е. по умолчанию.
                                                                      1. Александр Мальцев
                                                                        19 октября 2015, 14:22
                                                                        Здравствуйте.

                                                                        Чтобы это осуществить, Вам надо куда-то сохранять Ваши значения.
                                                                        Например, это можно организовать с помощью LocalStorage или cookies.
                                                                      2. Сергей
                                                                        30 апреля 2015, 12:04
                                                                        А как сделать, чтобы список раскрывался при наведении, а не при клике?
                                                                        А при клике был переход по
                                                                        href="page.html"
                                                                        1. Александр Мальцев
                                                                          30 апреля 2015, 13:54
                                                                          Это не очень хорошее решение. А как быть с мобильными пользователями?
                                                                          Код HTML:
                                                                          <div class="dropdown">
                                                                            <a href="page.html" class="dropdown-toggle">Ссылка с выпадающим меню<b class="caret"></b></a>
                                                                            <ul class="dropdown-menu">
                                                                            ...
                                                                            </ul>
                                                                          </div>
                                                                          
                                                                          Код JavaScript:
                                                                          $(document).ready(function () {
                                                                            $('.dropdown-toggle').mouseover(function() {
                                                                              $('.dropdown-menu').show();
                                                                            })
                                                                            $('.dropdown-toggle').mouseout(function() {
                                                                              t = setTimeout(function() {
                                                                                $('.dropdown-menu').hide();
                                                                              }, 500);
                                                                              $('.dropdown-menu').on('mouseenter', function() {
                                                                                $('.dropdown-menu').show();
                                                                                clearTimeout(t);
                                                                              }).on('mouseleave', function() {
                                                                                $('.dropdown-menu').hide();
                                                                              })
                                                                            })
                                                                          })
                                                                          
                                                                        2. Сергей
                                                                          30 апреля 2015, 11:45
                                                                          Добрый день.
                                                                          Я правильно понимаю, что атрибут
                                                                          data-target="#"
                                                                          только сохраняет видимость значения атрибута
                                                                          href="page.html"
                                                                          , а перехода по ссылке все равно не будет?
                                                                          1. Александр Мальцев
                                                                            30 апреля 2015, 12:24
                                                                            Добрый день, Сергей.
                                                                            Данный способ используется для того чтобы ссылка кроме раскрывающегося списка, который вызывается при нажатии на неё, имела ещё и атрибут href. Значение данного атрибута пользователь может увидеть при поднесении к ней курсора. А также при необходимости может перейти по данной ссылке, например с помощью соответствующего пункта из контекстного меню, которое можно вызвать, нажав на ссылку правой кнопкой мыши. Т.е. в этом случае ссылка остаётся ссылкой и куда ведёт.
                                                                            1. marta_i
                                                                              29 апреля 2017, 14:14
                                                                              <div class="navigacija">
                                                                              				<div class="nav-outer">	
                                                                              					<div class="container">
                                                                              						<nav class="navbar navbar-default" role="navigation">
                                                                              							<div class="navbar-header">
                                                                              								<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                                                                              									<span class="icon-bar"></span>
                                                                              									<span class="icon-bar"></span>
                                                                              									<span class="icon-bar"></span>
                                                                              								</button>
                                                                              								<a class="logo" href="#"><img src="images/logo1@2x.png"></a>
                                                                              							</div>
                                                                              							<div class="collapse navbar-collapse navbar-ex1-collapse">
                                                                              								<ul class="nav navbar-nav pull-right">
                                                                              									<li 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 class="divider"></li>
                                                                              											<li><a href="#">Страница 2</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="#">Страница 1</a></li>
                                                                              											<li><a href="#">Страница 2</a></li>
                                                                              											<li><a href="#">Страница 3</a></li>
                                                                              											<li><a href="#">Страница 4</a></li>
                                                                              											<li><a href="#">Страница 5</a></li>
                                                                              											<li><a href="#">Страница 6</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="#">Страница 1</a></li>
                                                                                                                          <li class="divider"></li>
                                                                                                                          <li><a href="#">Страница 2</a></li>
                                                                                                                      </ul>
                                                                                                                  </li>
                                                                              								</ul>
                                                                              							</div>
                                                                              						</nav>
                                                                              					</div>
                                                                              				</div>
                                                                              			</div>
                                                                              Добрый день. Спасибо за материал. Всю голову сломала над своей проблемой, на десктопе все отлично. А на мобилке при нажатии на меню оно выпадает, когда нажимаешь, допустим, на ПРОЕКТЫ то подпункты заливаются цветом ссылки и не работают, интересно, что последний пункт КОНТАКТЫ работает как должен, остальные Проекты и Главная — нет.
                                                                              Подскажите где искать, что редактировать?
                                                                              itchief.ru/assets/uploadify/d/6/0/d601855fa2fb468fbe2d5f7ac434aa5f.jpg — мобильный вид
                                                                              1. Дмитрий
                                                                                26 февраля 2016, 00:34
                                                                                А как сделать, чтобы оставалась возможность осуществить переход по этой ссылке?
                                                                            Войдите, пожалуйста, в аккаунт, чтобы оставить комментарий.