За последние два года, разработка веб-приложений (сайтов) продвинулась далеко вперед и то, что мы использовали для создания сайта ранее — уже устарело или появились более свежие методы.
Ранее, чтобы создать выпадающий список в html (на англ. — dropdown), мы просто использовали <select> и <option>. Факт в том, что мы и сейчас может его использовать, но зачастую нам нужно менять стили и адаптировать цветовую гамму выпадающего списка под стиль дизайна. К сожалению, не всегда получается стилизовать так как хочется, потому что select и option имеют свои ограничения и плохую поддержку кроссбраузерности.
Специально для этой статьи, я нашел 16 разных примеров, которые могут пригодиться во время разработки сайта. И так приступим.
1. Настраиваемый список
Html шаблон, который позволяет настроить собственные цвета на выпадающего списка.
Посмотреть в песочнице — http://codepen.io/silverdrop/pen/msrcE
2. Сделанный на CSS3/JavaScript
Написан на CSS3 и JavaScript. Обычный выпадающий список.
Посмотреть в песочнице — http://codepen.io/pedronauck/pen/fcaDw
3. Стиль: станции метро
Прозрачный выпадающий список со стилистикой станций метро.
Посмотреть в песочнице — http://codepen.io/carlcalderon/pen/KhwDH
4. Dropy. Написанное на SCSS & jQuery
Посмотреть в песочнице — http://codepen.io/Tombek/pen/JAvHC
5. Для длинных выдающих списков
Отличное решение для длинных выпадающих меню.
Посмотреть в песочнице — http://codepen.io/larrygeams/pen/feoDc
6. Темное и светлое выпадающее меню
Выпадающее меню, которое написано на чисто CSS без использования каких-либо скриптов.
Посмотреть в песочнице — http://codepen.io/Thibaut/pen/Jasci
7. Навигация, эффект раскрытия
Отлично подойдет для боковых меню на сайте, чтобы визуально показать категории на сайте.
Посмотреть в песочнице — http://cssdeck.com/labs/navigation-dropdown-with-flip-effect
8. Стильное меню настроек пользователя
Посмотреть в песочнице — http://codepen.io/jakestuts/pen/nEFyw
9. CSS3 выпадающий список
Посмотреть в песочнице — http://codepen.io/daniesy/pen/pfxFi
10. UI выпадающее меню
Сделано в стиле UI, подойдет под UI стилистику сайта.
Посмотреть в песочнице — http://codepen.io/Jeplaa/pen/IzAvx
11. Простой dropdown
Посмотреть в песочнице — http://codepen.io/Dianatomic/pen/HqICG
12. Выбор флага
Dropdown в стиле выбора страны. 
Посмотреть в песочнице — http://codepen.io/abhishek/pen/bkfLi
13. Обычный HTML, CSS dropdown
Посмотреть в песочнице — http://codepen.io/Metty/pen/dglwH
14. Пользовательские действия
Посмотреть в песочнице — http://codepen.io/DKunin/pen/EIobp
15. Анимационное выпадающее меню
Посмотреть в песочнице — http://codepen.io/MrBambule/pen/jIseg
16. 3D dropdown
Довольно интересный и простой дизайн.
Посмотреть в песочнице — http://codepen.io/mingger/pen/hdtiD
Надеюсь вам понравилось моя подборка. Оставляйте комментарии, делитесь мнением и присылайте собственные работы!
Как сделать выпадающий список в html (подборка ТОП 16) от bologer
