Сентябрь 2017
Автор: Рубрика: Верстка Комментариев нет

Выпадающее меню dropdown-menu в bootstarp3

Выпадающее меню dropdown-menu в bootstarp3

Сделаем меню с кнопкой, по нажатию на кнопку будет выпадать список меню.

Создаем класс btn-group, внутри будет кнопка btn и выпадающее меню c кареткой class=caret у span.

Создадим меню ul с классом dropdown-menu.

Внутри будет список li с ссылками.

Добавим классы, которые добавят выпадающее меню при нажатии на кнопку.

  1. dropdown-toggle этот класс дает понять bootstrap, что есть переключение между двумя состояниями, появляется и исчезает.
  2. data-toggle=dropdown.

После того как прописали два класса появится меню.

Дополнительные классы для видоизменения выпадающего меню.

  • dropup каретка меняет направление вверх. Меню появляется сверху кнопки.
  • pull-right прижимает кнопку к правой стороне экрана. Меню стало выравниваться по правой стороне.
  • drop-downmenu-right прижимает меню к правой стороне кнопки.

Отображения всплывающего меню в браузере с разными классами.

Отображения всплывающего меню в браузере с разными классами.

Код в index.html

Рассмотрим пример из практики с dropdown-menu.

Добавим навигацию с классом menu и второй класс скрывает меню на больших экранах hidden-lg.

Положим меню в контейнер и разобьем на две колонки col-xs-9 под логотип, вторая колонка col-xs-3 для иконки кнопки выпадающего меню.

Добавим кнопку с обязательными атрибутами data-toggle=dropdown и dropdown-toggle.

Меню состоит из такого же списка как и у большого экрана только с классом dropdown-menu.

Код index.html

Стилизуем кнопку меню.

  • Классу dropdown-toggle добавим отступ сверху, чтобы выравнять с логотипом margin-top: 20px, внутренние отступы сделаем padding: 10px 15px.
  • Размер шрифта font awesome укажем font-size: 30px.
  • Добавим закругление кнопки border-radius: 20px.
  • Фон будет фиолетовый, а иконка синей, при наведении мышки на кнопку &:hover, делаем цвета наоборот.

Код в main.sass.

Проверяем в браузере.

Рассмотрим пример из практики с dropdown-menu

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

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

Комментарии запрещены