Загрузка
Пока я творю, я живу!
Блог посвящен: 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.
Ответить
Февраль 5th, 2018 at 22:56
Спасибо
Ответить
Хорошая статья! Подскажите а как разделить выпадающий список на две колонки?
Ответить
Июль 9th, 2018 at 13:19
Вот тут Вы, Михаил, найдете ответ:
http://stepkinblog.ru/bootstrap/setka-osnovy-bootstrap-3-dlya-nachinayushhix-urok-4.html/
Ответить
Оч крутые уроки и примеры в самый раз,лучше большинства платных курсов
Ответить
Июль 9th, 2018 at 13:06
Спасибо, Александр, а то я уже думал прикрывать этот блог.
Ответить
Доброго времени суток. А подскажите можно ли стилизовать фон выпадающего меню?
Ответить
Апрель 5th, 2019 at 19:26
Извиняюсь нашел))
Ответить
Список не выпадает
браузер Microsoft edge пишу на visual code
Ответить