Как сделать на Bootstrap выпадающее меню?

Как сделать на Bootstrap выпадающее меню?

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

Как всегда нам поможет документация. Я уже не знаю, сколько раз я обращался к ней в этом цикле статей. Но действительно достаточно всего лишь смотреть и в нее и копировать оттуда примеры. Например, вот код для формирования простого выпадающего меню, где оба пункта являются выпадающими:

<div class="dropdown">
  <a data-toggle="dropdown" href="#">Города <span class="caret"></span></a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
		<li><a href = "#">Москва</a></li>
		<li><a href = "#">Пермь</a></li>
		<li><a href = "#">Орел</a></li>
		<li class = "divider"></li>
		<li><a href = "#">Калининград</a></li>
  </ul>
  </div>
<div class="dropdown">  
  <a data-toggle="dropdown" href="#">Страны <span class="caret"></span></a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
		<li><a href = "#">Беларусь</a></li>
		<li><a href = "#">Россия</a></li>
		<li><a href = "#">Украина</a></li>
		<li class = "divider"></li>
		<li><a href = "#">Молдова</a></li>
  </ul>
</div>

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

Ну а сами пункты выпадающего меню формируются списком. Пункт списка с классом divider позволяет нарисовать красивый простой разделитель между пунктами.

Возможно, придется подкорректировать отображение пунктов, поставить их в ряд, потому что изначально dropdown – блочный элемент. Я прописал некоторые стили для стилизации:

.dropdown{
	float: left;
	margin-right: -20px;
}
.dropdown>a{
	background: #7AA437;
	color: #fff;
	text-decoration: none;
	padding: 10px;
}
.dropdown .caret{
	margin-right: 10px;
}

Пункты списка выпадающего меню также можно оформить по вашему усмотрению.

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

Код подойдет тот же самый, только вместо ссылка вставьте кнопку, а общему контейнеру вместо класса dropdown укажите btn-group:

<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
    Города <span class="caret"></span>
  </button>

Отличие кнопки от ссылки в том, что кнопке не нужно прописывать стили, в отличие от ссылки. Также размеры кнопки можно легко менять с помощью классов btn-lg|md|sm|xs. Также выпадающее меню можно сделать с раздельными кнопками, этот пример вы можете посмотреть в документации.

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

Если вам нужно сделать выпадающее пункт меню в горизонтальной навигации, наиболее удобно будет использовать такой код:

<li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Выпадающий пункт <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
   </li>

Таких пунктов в навигации вы можете разместить несколько и они будут располагаться в одну строку, можете попробовать.

Как сделать в Bootstrap выпадающее меню при наведении на пункт?

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

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

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

Фреймворк Bootstrap - верстаем адаптивно, просто, быстро!

Получите видеокурс по основам Bootstrap

Получить

Метки:

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

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree