Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, Wordpress, Bootstrap
Всем привет!
Продолжаем изучать основы «bootstrap3».
В сегодняшнем уроке вы научитесь создавать выпадающее меню из списков.
Если смотрели, а точнее, читали предыдущий урок, тогда можете двигаться дальше, если не читали, пожалуйста, ознакомьтесь и возвращайтесь назад к изучению этого урока.
А мы идем дальше.
Выпадающий список будет появляться при клике на указанный объект. Для примера я взял кнопку. Вставьте вот этот код в ваш файл:
<div class="dropdown"> <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">МЕНЮ <b class="caret"></b> </button> <ul class="dropdown-menu"> <li><a href="http://bloggood.ru/">BlogGood.ru</a></li> <li><a href="http://stepkinblog.ru/">StepkinBlog.ru</a></li> </ul> </div>
Результат:
Что же я сделал, чтобы кнопку превратить в выпадающий список?
Указал класс «.dropdown» к блоку <div>, в котором находится список.
Чтобы список при клике по кнопке показался, добавляем класс «.dropdown-toggle» к кнопке и атрибут «data-toggle="dropdown"».
Класс .dropdown нужно присвоить блоку, который содержит список. Для показа списка используется кнопка или ссылка с классом «.dropdown-toggle» атрибутом data-toggle="dropdown".
Класс «.caret» - это чисто для создания стрелки вниз «▼»; для того, чтобы намекнуть пользователю, что в меню есть выпадающий список.
Добавил класс «.dropdown-menu» к списку <ul>, чтобы список стал выпадающим.
Вроде все, ничего не пропустил.
Теперь вы знаете, как на кнопку подцепить выпадающий список, а вот как то же самое на ссылку, смотрим ниже:
<div class="dropdown"> <a href="#" class="dropdown-toggle" 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><a href="#">Пункт 3</a></li> </ul> </div>
Результат:
Как видите, все идентично первому коду.
Разделитель в выпадающем списке
Используйте класс «.divider» внутри списка, чтобы отделить какой-то из разделов:
<li class="divider"></li>
Пример:
<div class="dropdown"> <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">МЕНЮ <b class="caret"></b> </button> <ul class="dropdown-menu"> <li><a href="http://bloggood.ru/">BlogGood.ru</a></li> <li><a href="http://stepkinblog.ru/">StepkinBlog.ru</a></li> <li class="divider"></li> <li><a href="#">Пункт 3</a></li> </ul> </div>
Результат:
Заблокированные элементы в выпадающем списке.
Чтобы заблокировать (сделать неактивным) пункт из выпадающего списка, добавьте класс «.disabled».
<li class="disabled"><a href="#">Архив</a></li>
Пример:
<div class="dropdown"> <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">МЕНЮ <b class="caret"></b> </button> <ul class="dropdown-menu"> <li><a href="http://bloggood.ru/">BlogGood.ru</a></li> <li><a href="http://stepkinblog.ru/">StepkinBlog.ru</a></li> <li class="divider"></li> <li class="disabled"><a href="#">Архив</a></li> <li><a href="#">Пункт 3</a></li> </ul> </div>
Результат:
Выпадающий список от стрелки «▼»
<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>
Результат:
Верхний выпадающий список.
А еще, может, кому-то пригодится для сайта это ход: при нажатии на меню, список будет появляться не снизу, а сверху. Добавить дополнительный класс «.dropup»:
<div class="dropdown dropup">
Пример:
<div class="dropdown dropup"> <a href="#" class="dropdown-toggle" 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><a href="#">Пункт 3</a></li> </ul> </div>
Результат:
Неплохой урок получился, не правда ли?!
Жду вас на следующих занятиях.
Постараюсь вас не разочаровать. Думаю, через месяц вы получите диплом опытного знатока Bootstrap 3.
Ответить
5 февраля, 2018 at 22:56
Спасибо
Ответить
Хорошая статья! Подскажите а как разделить выпадающий список на две колонки?
Ответить
9 июля, 2018 at 13:19
Вот тут Вы, Михаил, найдете ответ:
http://stepkinblog.ru/bootstrap/setka-osnovy-bootstrap-3-dlya-nachinayushhix-urok-4.html/
Ответить
Оч крутые уроки и примеры в самый раз,лучше большинства платных курсов
Ответить
9 июля, 2018 at 13:06
Спасибо, Александр, а то я уже думал прикрывать этот блог.
Ответить
Доброго времени суток. А подскажите можно ли стилизовать фон выпадающего меню?
Ответить
5 апреля, 2019 at 19:26
Извиняюсь нашел))
Ответить
Список не выпадает
браузер Microsoft edge пишу на visual code
Ответить
Круто, спасибо
Ответить