Изменение dropdown меню Bootstrap

Изменение dropdown меню Bootstrap

Изменение dropdown меню Bootstrap

Понадобилось изменить стандартное отображение dropdown меню Bootstrap. По основам Bootstrap есть целый список роликов, а по компонентам не нашёл время заснять. Итак,  исходный компонент находится тут, но можно воспользоваться навигационным баром она же навигационная панель меню. Результат, к который должен получится, виден на гиф-анимации к заметке (кажется переборщил с мельканием 🙂 ).

Изменение dropdown меню Bootstrap


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

Изменение dropdown меню Bootstrap: 2 комментария

  1. T-50

    Ролик понравился, и сам подход. Поменяли список на div-ы, придумали класс и стили к нему. Если бы оставить список, то пришлось бы повозиться, все стилевые свойства бутстраповские перелапатить. И ещё понравилось ( надо взять на заметку) line-height: равная высоте блока, и строка встала по середине. Первый раз увидел нормальное решение как это сделать не в таблице.

    1. @altarasov Автор записи

      Рад, что пригодилось. Есть ещё вариант с flexbox — bootstrap 4 уже использует.

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