Создаем стильные выпадающие списки. Выбор из выпадающего списка в HTML Выпадающий список при наведения css

CSS

.wrapper-dropdown-5 {
/* Size & position */
position : relative ;
width : 200px ;
margin : 0 auto ;
padding : 12px 15px ;

/* Styles */
background : #fff ;
border-radius: 5px ;
box-shadow: 0 1px 0 rgba(0 , 0 , 0 , 0.2 ) ;
cursor : pointer ;
outline : none ;
transition: all 0.3s ease-out;
}

.wrapper-dropdown-5 :after { /* Little arrow */
content : "" ;
width : 0 ;
height : 0 ;
position : absolute ;
top : 50% ;
right : 15px ;
margin-top : -3px ;
border-width : 6px 6px 0 6px ;
border-style : solid ;
border-color : #4cbeff transparent ;
}

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

.wrapper-dropdown-5 .dropdown {
/* Size & position */
position : absolute ;
top : 100% ;
left : 0 ;
right : 0 ;

/* Styles */
background : #fff ;
border-radius: 0 0 5px 5px ;
border : 1px solid rgba(0 , 0 , 0 , 0.2 ) ;
border-top : none ;
border-bottom : none ;
list-style : none ;
transition: all 0.3s ease-out;

/* Hiding */
max-height : 0 ;
overflow : hidden ;
}

На этот раз мы не изменяли непрозрачность до 0, чтобы скрыть меню. Мы установили max-height равную 0 и overflow: hidden. Почему установили max-height, а не height? Потому что мы не знаем точную высоту раскрытого списка.

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

.wrapper-dropdown-5 .dropdown li {
padding : 0 10px ;
}

.wrapper-dropdown-5 .dropdown li a {
display : block ;
text-decoration : none ;
color : #333 ;
padding : 10px 0 ;
transition: all 0.3s ease-out;
border-bottom : 1px solid #e6e8ea ;
}

.wrapper-dropdown-5 .dropdown li:last-of-type a {
border : none ;
}

.wrapper-dropdown-5 .dropdown li i {
margin-right : 5px ;
color : inherit ;
vertical-align : middle ;
}

/* Hover state */

.wrapper-dropdown-5 .dropdown li:hover a {
color : #57a9d9 ;
}

А теперь, в активном состоянии:

/* Active state */

.wrapper-dropdown-5 .active {
border-radius: 5px 5px 0 0 ;
background : #4cbeff ;
box-shadow: none ;
border-bottom : none ;
color : white ;
}

.wrapper-dropdown-5 .active :after {
border-color : #82d1ff transparent ;
}

.wrapper-dropdown-5 .active .dropdown {
border-bottom : 1px solid rgba(0 , 0 , 0 , 0.2 ) ;
max-height : 400px ;
}

Когда выпадающий список открыт, мы меняем нижние углы кнопки, ее цвет, направление стрелки и цвет стрелки и удаляем её тень и границы.
И, чтобы показать меню, мы устанавливаем max-height выпадающего списка равную 400 пикселей. Мы могли бы установить её равную 500px или 1000px, это не имеет значения.

JavaScript

function DropDown(el) {
this .dd = el;
this .initEvents () ;
}
DropDown.prototype = {
initEvents : function () {
var obj = this ;

Obj.dd .on ("click" , function (event) {
$(this ) .toggleClass ("active" ) ;
event.stopPropagation () ;
} ) ;
}
}

Обратная совместимость

Итак, теперь у нас есть 5 раскрывающихся списков, которые замечательно работают, но как насчет старых браузеров?
Эти браузеры не понимают, например, свойство opacity.

В этом нам поможет библиотека Modernizr . Грубо говоря, для тех, кто не знает, Modernizr это библиотека JavaScript, которая обнаруживает поддерживаемые HTML5 и CSS3 свойства в браузер пользователя.

Благодаря этому, мы можем "указать" браузеру, если вы не поддерживаете *это* свойство, то делайте следующее. Ниже приведен пример того, как мы можем управлять стилями для браузеров, которые не поддерживают определенные свойства CSS:

/* Нет поддержки CSS3 */

.no-opacity .wrapper-dropdown-1 .dropdown,
.no-pointerevents .wrapper-dropdown-1 .dropdown {
display : none ;
opacity: 1 ; /* If opacity support but no pointer-events support */
pointer-events: auto ; /* If pointer-events support but no pointer-events support */
}

.no-opacity .wrapper-dropdown-1 .active .dropdown,
.no-pointerevents .wrapper-dropdown-1 .active .dropdown {
display : block ;
}

Если браузер не поддерживает opacity или pointer-events, то используется свойство display: block;. Ну и так далее.

Заключение.

Я надеюсь, что эта статья помогла вам понять, как создавать пользовательские раскрывающиеся меню. Как вы можете видеть, это довольно просто.

Демонстрация

Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом

Простейший выпадающий список в HTML легко создать, используя тег select. Это тег-контейнер, в него вкладываются теги option - именно они задают элементы списка.

Есть несколько вариантов списков, которые можно сделать с помощью тега select: раскрывающийся список (варианты выпадают после клика на основном поле или наведения на него курсора) и список множественного выбора - в нем пользователь может выбрать несколько пунктов. Первые более распространены, они являются значимым элементом навигации современных сайтов. Выпадающий список множественного выбора можно применить, например, в каталогах, где нужно выбрать несколько характеристик товара.

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

Атрибуты тега select

1. Multiple - задает множественный выбор.

2. Size - задает количество видимых строк в списке, то есть высоту. И тут все зависит от того, присутствует атрибут multiple или нет. Если да, и вы не указываете size, то при наличии multiple пользователь увидит все возможные варианты выбора, если же multiple отсутствует, то показана будет всего одна строчка, а остальные посетитель сможет прочитать, когда нажмет на значок лифта с правой стороны. Если же высота size задана и она меньше количества вариантов, то справа появится полоса прокрутки.

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

Тег select не имеет обязательных атрибутов в отличие от тега option.

Атрибуты вложенного тега option

1. Selected - предназначен для выделения пункта списка. Пользователь сможет выделять более одного пункта, если задан атрибут multiple (см. выше).
2. Value - значение. Этот атрибут обязателен. Веб-сервер должен понимать, какие именно пункты списка выбрал пользователь.
3. Label. С помощью этого атрибута можно сокращать слишком длинные элементы списков. Например, на экран будет выводиться «Милан», вместо указанного в теге option «Милан - административный центр Ломбардии. Северная Италия». Этот атрибут также используется для группировки пунктов в списке.

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

Выпадающий список другими способами

Его можно сделать при помощи CSS, например, список будет появляться при наведении курсора на элемент страницы. Отличные возможности для создания списков предоставляет JavaScript , работу которого упрощает библиотека Jquery. Выпадающий список, подключенный с помощью этой библиотеки, может быть очень сложным, например, каскадным. То есть при выборе элемента в одном списке появляется следующий список, например, существует пункт меню «Женская одежда» (при наведении выпадают затем при выборе одного из видов, например, «Верхняя одежда», выпадает список с элементами: куртки, парки, пальто, полупальто, шубы и т. п.

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

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

А что если я скажу, что можно и стандартный HTML выпадающий список не плохо оформить на чистом CSS ?

Выпадающий список на HTML

Цвет фона и текста можно менять, причем делается это очень просто.

Sherlock Holmes The Great Gatsby V for Vendetta The Wolf of Wallstreet Quantum of Solace

В span мы добавили 2 класса, один основной, на который ляжут все основные стили “custom-dropdown “, а второй big, который будет определять размер выпадающего списка . Мы можем заранее подготивить скажем 3 размера, big, medium, small , задать в стилях font-size . И в дальнейшем не заморачиваться. Это можно и пропустить, все зависит от вашего дизайна на сайте.

Body { background: #2a2a2b; color: #fff; text-align: center; font-family: Arial, Helvetica; } .big { font-size: 1.2em; } /* Custom dropdown */ .custom-dropdown { position: relative; display: inline-block; vertical-align: middle; margin: 10px; /* demo only */ } .custom-dropdown select { cursor:pointer; background-color: #2980b9; color: #fff; font-size: inherit; padding: .5em; padding-right: 2.5em; border: 0; margin: 0; border-radius: 3px; text-indent: 0.01px; text-overflow: ""; -webkit-appearance: button; /* hide default arrow in chrome OSX */ } .custom-dropdown::before, .custom-dropdown::after { content: ""; position: absolute; pointer-events: none; } .custom-dropdown::after { /* Custom dropdown arrow */ content: "\25BC"; height: 1em; font-size: .625em; line-height: 1; right: 1.2em; top: 50%; margin-top: -.5em; } .custom-dropdown::before { /* Custom dropdown arrow cover */ width: 2em; right: 0; top: 0; bottom: 0; border-radius: 0 3px 3px 0; } .custom-dropdown select { color: rgba(0,0,0,.3); } .custom-dropdown select::after { color: rgba(0,0,0,.1); } .custom-dropdown::before { background-color: rgba(0,0,0,.15); } .custom-dropdown::after { color: rgba(0,0,0,.4); }

Если вы не хотите заморачиваться и изучать стили, а просто добавить себе на сайт и поменять цвет под дизайн вашего сайта. То вам всего лишь в стиле “.custom-dropdown select ” нужно поменять значения background-color и color