Сегодня речь пойдет о создании Dropdown навигации с применением Bootstrap 4. Выпадающий список был вдохновлен сайтом DigitalOcean на котором реализованы примерно такие же списки. По умолчанию мы продемонстрируем три выпадающих списка, содержания которых стилизировано содержание от простого текста до иконок с подписями. Списки достаточно красиво смотрятся, по этому отлично подойдут к светлому и темному сайту, все списки реализованы с применением Bootstrap 4. Давайте же посмотрим, что у нас получилось.

 

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

Шаг 1. HTML

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

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

Шаг 2. CSS

Так как у нас часть стилей будут использоваться с  Bootstrap нам осталось стилизовать сам выпадающий список, делаем мы это следующим образом:

Данное выпадающее меню достаточно простое, но, думаю, каждый из Вас найдет что-то в нем полезное для себя. Что скажете друзья?

Вот и все. Готово!