Создаем множественные раскрывающиеся списки на bootstrap, в том числе и при наведении курсора мышки

Приветствую всех подписчиков и читателей данного обучающего блога. В текущей публикации я решил рассказать о возможностях инструмента Bootstrap раскрывающийся список.

Помимо разбора встроенных классов и правил работы с ними, я расскажу, как создать выпадающее меню при наведении на элемент, каким образом реализовать раскрывающиеся списки для группы кнопок, а также покажу, как внедрить в них картинки, чекбоксы и другие объекты. Ну а теперь давайте перейдем к основному материалу!

Для начала вспомним теоретический материал

Чтобы реализовать выпадающий список, для начала нужно определить блок с классом .dropdown, в который будет входить кнопка и пункты меню.

Для кнопки обязательно стоит прописать атрибут data-toggle со значением dropdown, а также добавить специальный символ стрелки:

<span class="caret"></span>

Ну а что касается пунктов навигации, то думаю вы догадались, что они создаются при помощи списка, обычно маркированного. И не забудьте тут указать важный класс .dropdown-menu.

В результате у вас должен получиться вот такой код:

1
2
3
4
5
6
7
8
9
10
11

<div class="container">
  <div class="dropdown">
    <button class="btn btn-success dropdown-toggle" type="button" data-toggle="dropdown">Азиатская кухня
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a href="#">Корейская</a></li>
      <li><a href="#">Японская</a></li>
      <li><a href="#">Китайская</a></li>
    </ul>
  </div>
</div>

На этом создание стандартного элемента закончено. Однако мало кто пользуется минимальным набором параметров, ведь фреймворк предоставляет множество дополнительных возможностей.

Преображение началось! Добавим разделитель и заглавие

Чтобы сделать представленную панель управления более привлекательной, воспользуемся такими инструментами, как .divider и .dropdown-header. Первый класс отделяет пункты меню горизонтальной линией.

Данное дополнение может пригодиться для разделения пунктов по их категориям. А второй класс добавляет заголовок к каждому перечню. Для усвоения материала рассмотрите программный код.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

  <div class="dropdown">
    <button class="btn btn-lg btn-warning dropdown-toggle" type="button" data-toggle="dropdown">Выбрать направление 
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li class="dropdown-header">Азиатская кухня</li>
      <li><a href="#">Японская</a></li>
      <li><a href="#">Корейская</a></li>
      <li><a href="#">Китайская</a></li>
      <li class="divider"></li>
      <li class="dropdown-header">Европейская кухня</li>
<li><a href="#">Итальянская</a></li>
<li><a href="#">Украинская</a></li>
      <li><a href="#">Французская</a></li>
    </ul>
  </div>

Группа кнопок и подменю

Очень часто на сайтах можно увидеть аккуратное оформление кнопок с вертикальным разделителем, отделяющим название объекта от символа действия (например, символа стрелки вниз или лупы). И сейчас я покажу как это реализовать.

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

1
2
3
4
5
6
7
8
9
10
11

  <div class="btn-group">
    <button type="button" class="btn btn-info">Смартфоны</button>
    <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">Samsung</a></li>
      <li><a href="#">iPhone</a></li>
 
    </ul>
  </div>

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

1
2
3
4
5
6
7
8
9
10

<form role="search">
    <div class="form-group input-group">
        <input type="text" class="form-control" placeholder="Search..">
			<span class="input-group-btn">
				<button class="btn btn-default" type="button">
					<span class="glyphicon glyphicon-search"></span>
				</button>
			</span>
    </div>
</form>

Раскрытие списка при наведении

Все предыдущие примеры раскрывали перечень пунктов по нажатию на кнопку. Но достаточно часто можно встретить и вариант выпадающего меню, срабатывающего при наведении на элемент курсора. Для этого необходимо в хедере веб-страницы после объявления скриптов добавить стилевые правила.

<style>

.dropdown:hover > .dropdown-menu {

display: block;

}

</style>

А теперь в тег <body> вставить:

1
2
3
4
5
6
7
8
9
10
11

  <div class="dropdown">
    <button class="btn btn-lg btn-danger dropdown-toggle" type="button" data-toggle="dropdown">Товары
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li class="dropdown-header">Одежда</li>
      <li class="divider"></li>
      <li><a href="#">Женская</a></li>
      <li><a href="#">Мужская</a></li>
      <li><a href="#">Детская</a></li>
    </ul>
  </div>

А что делать, если список достаточно большой?

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

Для этого в стилях просто добавьте еще одно описание стилей css.

.dropdown-menu {

max-height: 125px;

overflow-y: scroll;

width: 339px;

}

Первый параметр задает максимальную высоту блока меню, а второй включает горизонтальный скролл. Третье же свойство я использовал для выравнивания ширины блока под кнопку.

Код разметки будет выглядеть следующим образом:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<div class="dropdown">
    <button class="btn btn-lg btn-danger dropdown-toggle" type="button" data-toggle="dropdown">Выберете пункт или целый раздел
    <span class="caret"></span></button>
    <ul class="dropdown-menu" >
      <li class="dropdown-header"><div class="checkbox">
  <label><input type="checkbox" value="">Одежда (все категории)</label>
</div></li>
      <li class="divider"></li>
      <li><a href="#">Женская</a></li>
      <li><a href="#">Мужская</a></li>
      <li><a href="#">Детская</a></li>
  <li class="dropdown-header"><div class="checkbox">
  <label><input type="checkbox" value="">Обувь (все категории)</label>
</div></li>
      <li class="divider"></li>
      <li><a href="#">Женская</a></li>
      <li><a href="#">Мужская</a></li>
      <li><a href="#">Детская</a></li>
    </ul>
  </div>

Обратите внимание, что программу я дополнил элементом управления checkbox. Аналогичным способом можно вставить и другие объекты.

Аналоги раскрывающегося списка

Помимо Dropdown во фреймворке существует плагин под названием Select Plugin. Разметка объекта аналогична базовой в языке html, т.е. необходимо объявить парный тег <select>, а в нем для пунктов использовать <option>. Данный инструмент использует стилевое оформление из dropdown.js.

Однако в добавок к этому разработчики описываемого плагина создали для него множество методов, опций и событий. Подробнее о Select Plugin вы сможете прочитать в одной из публикаций на моем блоге.

На этой ноте я заканчиваю свою статью. Надеюсь вы нашли в ней что-то новое для себя. А если это так, то подписывайтесь на обновления блога и обязательно делитесь ссылками на понравившиеся публикации с друзьями. Пока-пока!

С уважением, Роман Чуешов