Css оформление выпадающего списка. Пользовательское оформление выпадающих списков

16.05.2019

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Привет, друзья! Сегодня мы хотим рассказать вам еще кое-что о CSS! На этот раз давайте поговорим (и сделаем это!) о разработке чего-то более практичного, нежели кнопки и переключатели. Давайте поговорим о выпадающих списках. Цель данного руководства состоит в том, чтобы показать вам, как создать привлекательное выпадающее меню без использования изображений, прибегнув лишь к коду CSS. Для того чтобы всё у нас заработало, нам понадобится строчка кода jQuery.

Внимание! У вас нет прав для просмотра скрытого текста.

То, что следует знать перед началом:

* В отрывках CSS-кода вы не увидите браузерных префиксов, но они есть в файлах архива.
* Лично мы используем блочную модель, где (ширина)=(ширина элемента)+(отступы)+(границы). Мы реализуем это при помощи следующего отрывка кода:

*,
*:after,
*:before {
box-sizing: border-box;
}
С чего начнем?

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

javascript

Сейчас нам потребуется вооружиться javascript. Так как для всех демо-файлов используется один и тот же JS-сниппет, давайте сначала разберемся с ним:

return false;
});

Var dd = new DropDown($("#dd"));

$(document).click(function() {
// all dropdowns
$(".wrapper-dropdown-1").removeClass("active");
});

});
Что же делает этот скрипт? Сначала он переключает класс под названием.active, когда вы кликаете по оболочке. Это означает, что если оболочка не имеет класса.active, то он добавляет его, а если уже имеет, то он исключает его.

Во-вторых, он дуплицирует стандартное положение выпадающего списка, закрывая его, если курсор вашей мыши направляется куда-либо еще на странице. В целом, этот скрипт как бы повествует о том, что если мы кликаем по дочернему элементу тега «html» (то есть, по каждому элементу в DOM), оболочка теряет класс.active. Но нам нужно исключить подобное поведение в самой оболочке. Довольно просто, не правда ли?

Итак, теперь мы понимаем, как это все работает, и сейчас пришло время создавать привлекательные выпадающие списки!

Пример 1

Давайте начнем с чего-то простого: обычный выпадающий список для выбора пола. Давайте рассмотрим разметку:

Разметка

Нам нужно несколько вещей: оболочка, (скрытый) выпадающий список и «ярлык», который мы обернем в span-элемент. Мы используем анкоры потому, что нам это кажется корректным с точки зрения семантики, но мы также можем использовать и другой тег.

CSS-код

Давайте окунемся в CSS-код, на котором мы и ставим акцент в нашем сегодняшнем руководстве. Начнем с оболочки:

Wrapper-dropdown {
/* Size and position */
width: 200px;
padding: 10px;
margin: 0 auto;

/* Styles */
background: #9bc7de;
color: #fff;
outline: none;
cursor: pointer;

/* Font settings */
font-weight: bold;
}
Здесь мы делаем несколько вещей. Сначала выставляем ширину нашего выпадающего списка и добавляем некоторые отступы и поля. Далее мы придаем им некоторое оформление. И наконец, мы выставляем некоторые настройки шрифтов, которые будут применяться к самому выпадающему списку.

Давайте закончим с «ярлыком», добавив небольшую стрелку справой стороны посредством псевдо-элемента (с учетом стиля и без необходимости писать дополнительный код).

Wrapper-dropdown:after {
content: "";
width: 0;
height: 0;
position: absolute;
right: 16px;
top: 50%;
margin-top: -6px;
border-width: 6px 0 6px 6px;
border-style: solid;
border-color: transparent #fff;
}
Мы думаем, любому известно, как посредством CSS сделать небольшой треугольник благодаря небольшому трюку с границами. В целом, это хак, но работает на ура! Здесь больше ничего делать не надо, просто маленькую белую строчку с правой стороны оболочки.

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

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

/* Styles */
background: #fff;
font-weight: normal; /* Overwrites previous font-weight: bold; */

/* Hiding */
opacity: 0;
pointer-events: none;
}
Что мы только что сделали? Мы задали списку абсолютное позиционирование, и расположили его за кнопкой (top: 100%;). Мы задали ему ту же ширину, что и кнопке, а левое и правое значения выставили на 0. И что более важно, мы скрыли его, понизив непрозрачность до 0. Что же насчет pointer-events? Если мы чего-то не видим, это не значит, что этого нет. Выставив pointer-events на none, мы предотвращаем нажатие на выпадающий список в тот момент, когда он «скрыт».

Давайте добавим некоторые стили к элементам списка внутри выпадающего списка:

Wrapper-dropdown-1 .dropdown li a {
display: block;
text-decoration: none;
color: #9e9e9e;
padding: 10px 20px;
}

/* Hover state */
.wrapper-dropdown-1 .dropdown li:hover a {
background: #f3f8f8;
}
Итак, теперь у нас есть привлекательная кнопка и красивое скрытое выпадающее меню. Теперь нам нужно сделать так, чтобы это меню отображалось, когда пользователь нажимает по кнопке.
С помощью javascript мы переключаем класс.active при нажатии на кнопку, так что, основываясь на данном классе, мы можем изменять наш CSS таким образом, чтобы отобразить выпадающий список

/* Active state */
.wrapper-dropdown-1.active .dropdown {
opacity: 1;
pointer-events: auto;
}

Wrapper-dropdown-1.active:after {
border-color: #9bc7de transparent;
border-width: 6px 6px 0 6px ;
margin-top: -3px;
}

Wrapper-dropdown-1.active {
background: #9bc7de;
background: linear-gradient(to right, #9bc7de 0%, #9bc7de 78%, #ffffff 78%, #ffffff 100%);
}
Здесь у нас есть три вещи:

* Во-первых, мы делаем так, чтобы выпадающий список появлялся за счет изменения значения непрозрачности на 1. Не забудьте выставить pointer-events на auto для того, чтобы активировать взаимодействие с этим параметром!
* Во-вторых, мы изменяем направление и цвет маленькой стрелки.
* В-третьих, мы изменяем фон за стрелкой, используя очень умную градацию на кнопке. Красиво, не правда ли?

javascript

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

Function DropDown(el) {
this.dd = el;
this.opts = this.dd.find("ul.dropdown > li");
this.val = "";
this.index = -1;
this.initEvents();
}
DropDown.prototype = {
initEvents: function() {
var obj = this;

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

var opt = $(this);
obj.val = opt.text();
obj.index = opt.index();
obj.placeholder.text("Gender: " + obj.val);
});
},
getValue: function() {
return this.val;
},
getIndex: function() {
return this.index;
}
}
Здесь код очень прост: когда по элементу производится нажатие, мы получаем его значение и отображаем его в «label».

Пример 2

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

Разметка

Теги «i» используются для отображения маленьких иконок от . Нам не хотелось бы рассказывать здесь о всех ресурсах от FontAwesome, так как об этом рассказывали уже тысячу раз. Просто будьте уверенными в том, что они работают.

CSS-код

Давайте начнем с разработки оболочки. Примерно такая же, какой она была в нашем предыдущем примере. Обратите внимание на 5-пиксельную левую границу – она очень важна в продолжении руководства.

Wrapper-dropdown-2 {
/* Size and position */
position: relative; /* Enable absolute positioning for children and pseudo elements */
width: 200px;
margin: 0 auto;
padding: 10px 15px;

/* Styles */
background: #fff;
border-left: 5px solid grey;
cursor: pointer;
outline: none;
}
Теперь идет маленькая стрелка. Такая же, как в предыдущем примере:

Wrapper-dropdown-2:after {
content: "";
width: 0;
height: 0;
position: absolute;
right: 16px;
top: 50%;
margin-top: -3px;
border-width: 6px 6px 0 6px;
border-style: solid;
border-color: grey transparent;
}
И вот, наконец, выпадающее меню. Опять же, оно очень похоже на то, что мы сделали в предыдущем примере.

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

/* Styles */
background: white;
list-style: none;

/* Hiding */
opacity: 0;
pointer-events: none;
}
Обратите внимание на переход, который мы будем использовать для того, чтобы выпадающее меню появлялось с анимацией, вместо обычного появления, как это было в первом демо.

Некоторые стили для ссылок и иконок:

Wrapper-dropdown-2 .dropdown li a {
display: block;
text-decoration: none;
color: #333;
border-left: 5px solid;
padding: 10px;
transition: all 0.3s ease-out;
}

Wrapper-dropdown-2 .dropdown li:nth-child(1) a {
border-left-color: #00ACED;
}

Wrapper-dropdown-2 .dropdown li:nth-child(2) a {
border-left-color: #4183C4;
}

Wrapper-dropdown-2 .dropdown li:nth-child(3) a {
border-left-color: #3B5998;
}

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

/* Hover state */

Wrapper-dropdown-2 .dropdown li:hover a {
color: grey;
}
Мы задаем ссылкам левую границу, оформленную цветом в зависимости от бренда, за который они отвечают. Текст слегка смещен вправо посредством параметра margin-right, примененного к иконкам.

А теперь, раскрытое положение. Все вполне ясно: стрелки меняют направление, а выпадающее меню становится видимым. Благодаря параметру transition на выпадающем списке, оно появляется постепенно (параметр непрозрачности изменяется от 0 до 1).

Wrapper-dropdown-2.active:after {
border-width: 0 6px 6px 6px;
}

Wrapper-dropdown-2.active .dropdown {
opacity: 1;
pointer-events: auto;
}
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();
});
}
}
Пример 3

Этот пример, наверное, больше других напоминает стандартный элемент выбора. То есть, при выборе какого-то элемента, стандартное значение ярлыка заменятся значением выбранного элемента. Выглядит привлекательно, не правда ли?

Разметка

Не больше, чем в прошлых вариантах. Давайте сразу переходить к CSS!

CSS-код

Wrapper-dropdown-3 {
/* Size and position */
position: relative;
width: 200px;
margin: 0 auto;
padding: 10px;

/* Styles */
background: #fff;
border-radius: 7px;
border: 1px solid rgba(0,0,0,0.15);
box-shadow: 0 1px 1px rgba(50,50,50,0.1);
cursor: pointer;
outline: none;

/* Font settings */
font-weight: bold;
color: #8AA8BD;
}
Здесь мы используем некоторые границы, тень блока и закругленные углы. Нам нужна небольшая стрелка:

Wrapper-dropdown-3:after {
content: "";
width: 0;
height: 0;
position: absolute;
right: 15px;
top: 50%;
margin-top: -3px;
border-width: 6px 6px 0 6px;
border-style: solid;
border-color: #8aa8bd transparent;
}
Здесь все так же, как и раньше, поэтому давайте пропустим данный этап и перейдем сразу к разработке выпадающего меню и его дочерних элементов.

Wrapper-dropdown-3 .dropdown {
/* Size & position */
position: absolute;
top: 140%;
left: 0;
right: 0;

/* Styles */
background: white;
border-radius: inherit;
border: 1px solid rgba(0,0,0,0.17);
box-shadow: 0 0 5px rgba(0,0,0,0.1);
font-weight: normal;
transition: all 0.5s ease-in;
list-style: none;

/* Hiding */
opacity: 0;
pointer-events: none;
}

Wrapper-dropdown-3 .dropdown li a {
display: block;
padding: 10px;
text-decoration: none;
color: #8aa8bd;
box-shadow: inset 0 1px 0 rgba(255,255,255,1);
transition: all 0.3s ease-out;
}

Wrapper-dropdown-3 .dropdown li i {
float: right;
color: inherit;
}

Wrapper-dropdown-3 .dropdown li:first-of-type a {
border-radius: 7px 7px 0 0;
}

Wrapper-dropdown-3 .dropdown li:last-of-type a {
border-radius: 0 0 7px 7px;
border: none;
}

/* Hover state */

Wrapper-dropdown-3 .dropdown li:hover a {
background: #f3f8f8;
}
Здесь стоит отметить следующее:

* Мы используем небольшую тень блока для ссылок для того, чтобы создать незначительный эффект свечения в верхней части.
* Во избежание того, что данная тень выходит за пределы меню, мы задаем первой ссылке закругленные углы.
* Исключаем границу последней ссылки для того, чтобы избежать некрасивой 1-пиксельной границы в самом низу выпадающего меню.
* Мы не изменяем разметку для того, чтобы поместить иконки в правую часть: просто используем float: right.

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

Wrapper-dropdown-3 .dropdown:after {
content: "";
width: 0;
height: 0;
position: absolute;
bottom: 100%;
right: 15px;
border-width: 0 6px 6px 6px;
border-style: solid;
border-color: #fff transparent;
}

Wrapper-dropdown-3 .dropdown:before {
content: "";
width: 0;
height: 0;
position: absolute;
bottom: 100%;
right: 13px;
border-width: 0 8px 8px 8px;
border-style: solid;
border-color: rgba(0,0,0,0.1) transparent;
}
Для этой стрелки мы используем 2 псевдо-элемента? Нам нужно создать границу вокруг них. Мы создаем белый треугольник, который расположен вверх от серого цвета и размером немного больше. Таким образом, все выглядит так, как будто у нас только одна маленькая стрелка с границей.

А теперь переходим к раскрытому состоянию. Практически то же самое. Только обратите внимание на то, что мы сделали переход к.dropdown немного дольше, чем обычно (0.5s вместо 0.3s). Таким образом, открытие меню происходит гораздо более плавно.

Wrapper-dropdown-3.active .dropdown {
opacity: 1;
pointer-events: auto;
}
javascript

Завершая данное демо, нам нужно добавить немного кода javascript, чтобы заменить стандартное значение кнопки на состояние выбранной. В первом примере мы уже видели, как это делается, но так как здесь у нас больше нет слова «transport», JS немного отличается.

Function DropDown(el) {
this.dd = el;
this.placeholder = this.dd.children("span");
this.opts = this.dd.find("ul.dropdown > li");
this.val = "";
this.index = -1;
this.initEvents();
}
DropDown.prototype = {
initEvents: function() {
var obj = this;

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

Obj.opts.on("click",function(){
var opt = $(this);
obj.val = opt.text();
obj.index = opt.index();
obj.placeholder.text(obj.val);
});
},
getValue: function() {
return this.val;
},
getIndex: function() {
return this.index;
}
}
Пример 4

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

Разметка

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

CSS-код

Wrapper-dropdown-4 {
/* Size and position */
position: relative;
width: 270px;
margin: 0 auto;
padding: 10px 10px 10px 30px;

/* Styles */
background: #fff;
border: 1px solid silver;
cursor: pointer;
outline: none;
}
Здесь сказать, в принципе, нечего, за исключением того, что мы используем важный отступ слева для создания достаточного пространства для красных линий. Теперь наша стрелка находится справа:

Wrapper-dropdown-4:after {
content: "";
width: 0;
height: 0;
position: absolute;
right: 10px;
top: 50%;
margin-top: -3px;
border-width: 6px 6px 0 6px;
border-style: solid;
border-color: #ffaa9f transparent;
}
Выпадающее меню. Нам кажется, вы уже хорошо подружились с ним.

Wrapper-dropdown-4 .dropdown {
/* Size & position */
position: absolute;
top: 100%;
margin-top: 1px; /* border of wrapper */
left: -1px;
right: -1px;

/* Styles */
background: white;
border: 1px solid silver;
border-top: none;
list-style: none;
transition: all 0.3s ease-out;

/* Hiding */
opacity: 0;
pointer-events: none;
}
Нам нужно выставить margin-top на 1px, так как нам нужно сместить его немного вниз из-за границы оболочки. Параметр left выставлен на -1px для того, чтобы сместить выпадающий список на место, и мы задаем ту же границу, которую задавали его родительскому элементу, но в этот раз мы исключаем верхнюю границу.

Wrapper-dropdown-4 .dropdown li {
position: relative; /* Enable absolute positioning for checkboxes */
}

Wrapper-dropdown-4 .dropdown li label {
display: block;
padding: 10px 10px 10px 30px; /* Same padding as the button */
border-bottom: 1px dotted #1ccfcf;
transition: all 0.3s ease-out;
}

Wrapper-dropdown-4 .dropdown li:last-of-type label {
border: none;
}

Wrapper-dropdown-4 .dropdown li input /* Checkboxes */ {
position: absolute;
display: block;
right: 10px;
top: 50%;
margin-top: -8px;
}

/* Hover state */

background: #f0f0f0;
}

/* Checked state */

Wrapper-dropdown-4 .dropdown li input:checked ~ label {
color: grey;
text-decoration: line-through;
}
Чекбоксы позиционированы абсолютно, с правой стороны по центру каждой линии, но так как они привязаны к ярлыкам, вы можете кликнуть куда угодно по линии для того, чтобы переключить их.
Когда чекбокс выделен, соответствующий ярлык становится серым и перечеркнутым. Просто, но эффективно.

А сейчас, нам нужно разобраться с двумя тоненькими красными линиями с левой стороны нашего небольшого блокнота. Существует два способы реализовать это: один посредством псевдо-элементов, а второй посредством градаций. Давайте взглянем на оба варианта.

/* Red lines: the pseudo-elements way */
.wrapper-dropdown-4 .dropdown:before,
.wrapper-dropdown-4:before {
content: "";
width: 4px;
height: 100%;
position: absolute;
top: 0;
left: 15px;
border: 1px solid #ffaa9f;
border-top: none;
border-bottom: none;
z-index: 2;
}

/* ИЛИ: */
/* Red lines: the gradients way */

Wrapper-dropdown-4 .dropdown,
.wrapper-dropdown-4 {
background: linear-gradient(left, white 5%, #ffaa9f 5%, #ffaa9f 5.3%, white 5.3%, white 6.5%, #ffaa9f 6.5%, #ffaa9f 6.8%, white 6.8%);
}

Wrapper-dropdown-4 .dropdown li:hover label {
background: linear-gradient(left, #f0F0F0 5%, #ffaa9f 5%, #ffaa9f 5.3%, #f0F0F0 5.3%, #f0F0F0 6.5%, #ffaa9f 6.5%, #ffaa9f 6.8%, #f0F0F0 6.8%);
}
Первый метод создает псевдо-элемент (на самом деле два: один для кнопки, и второй для выпадающего меню) с левой и правой границами, которые расположены поверх всего остального.
Второй метод имитирует красные линии посредством градации как на оболочке, так и на выпадающем списке.
Так какой же метод лучше? Возможно, первый, потому что если вам нужно будет изменить эффект при наведении на элементы списка, вам нужно будет изменить градацию, которая не очень привлекательна. Более того, псевдо-элементы лучше поддерживаются в браузерах (до IE8), нежели градации, которые не поддерживаются в IE вплоть до 10 версии IE.

Давайте завершим работу над раскрытым состоянием. Здесь ничего нового.

/* Active state */

Wrapper-dropdown-4.active:after {
border-width: 0 6px 6px 6px;
}

Wrapper-dropdown-4.active .dropdown {
opacity: 1;
pointer-events: auto;
}
javascript

Function DropDown(el) {
this.dd = el;
this.opts = this.dd.find("ul.dropdown > li");
this.val = ;
this.index = ;
this.initEvents();
}
DropDown.prototype = {
initEvents: function() {
var obj = this;

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

Obj.opts.children("label").on("click",function(event){
var opt = $(this).parent(),
chbox = opt.children("input"),
val = chbox.val(),
idx = opt.index();

($.inArray(val, obj.val) !== -1) ? obj.val.splice($.inArray(val, obj.val), 1) : obj.val.push(val);
($.inArray(idx, obj.index) !== -1) ? obj.index.splice($.inArray(idx, obj.index), 1) : obj.index.push(idx);
});
},
getValue: function() {
return this.val;
},
getIndex: function() {
return this.index;
}
}
Пример 5

Наш последний пример представляет собой выпадающее меню админ-панелей. Для этого меню мы используем другую анимацию при переключении. Вместо появления/исчезновения мы используем скольжение.

Разметка

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? Потому что мы не знаем точную высоту раскрытого выпадающего меню.
На этот раз нам понадобится pointer-events, так как меню здесь отсутствует.

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

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;
}
Когда выпадающее меню открыто, мы изменяем нижние углы кнопки, её цвет, направление стрелки и цвет стрелки, а также исключаем оба ее параметра: box-shadow и border.
И для того чтобы отобразить меню, мы выставляем max-height выпадающего меню на 400 пикселей. Мы могли бы выставить и 500px, и 1000px, и 1000000px; - это не имеет значения.

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 невероятных выпадающих меню, которые работают великолепно, но что делать с устаревшими браузерами?
Эти браузеры не понимают параметра непрозрачности. И даже если некоторые из них ладят с фильтрами, они не распознают pointer-events. Это очень плохо, и поэтому здесь нам нужен запасной вариант.

Здесь нам на помощь приходит Modernizr. Для тех, кто не знает, что такое – это javascript-библиотека, которая определяет HTML5 и CSS3 в браузере пользователя.
Благодаря этому скрипту мы можем сообщать браузеру нечто вроде «если ты не понимаешь *этот* параметр, то сделай *это*». С помощью Modernizr мы можем добавлять такие классы в HTML, как например no-pointerevents, если браузер не поддерживает no-pointerevent. Давайте рассмотрим пример того, как мы можем устроить запасной вариант для браузеров, которые не поддерживают конкретные CSS-параметры:

/* No CSS3 support */

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;
}
Если браузер не поддерживает и непрозрачности и pointer-events, тогда мы скрываем выпадающий список, используя незамысловатый параметр display: none;.
Если браузер не поддерживает непрозрачность, но поддерживает pointer-events, то тогда этот параметр вы выставляем на auto для того, чтобы позволить пользователю кликать по меню после того, как оно будет раскрыто.
Если же браузер не поддерживает pointer-events, но поддерживает непрозрачность, то мы выставляем параметр на 1 для того, чтобы выпадающий список появлялся тогда, когда пользователь переключается на класс.active.

Когда включен класс.active, мы отображаем выпадающий список, используя параметр display: block;. Всё невероятно просто!

Примечание: конечно же, это всё не относится к демо, где используется анимация max-height. Все эти правила работают с простыми примерами, где используется только непрозрачность и pointer-events.

Сегодня хочу представить небольшой «рецепт» создания списка на CSS. Никакого JQuery, никакого CSS3 — только старый, добрый, кроссбраузерный CSS. Пример достаточно простой, поэтому опытным товарищам, возможно, будет неинтересно. Будем реализовывать выпадающий список с социальными кнопками.

Итак, не будем долго рассуждать, перейдем сразу к делу

HTML

Поделись записью

Facebook
Twitter
Google Plus
ВКонтакте
RSS

Я сознательно опускаю общие моменты, вроде подключения стилей, чтобы код не разрастался. Внизу страницы я дам ссылку на исходники — там все есть.
Что у нас в HTML — обычный список и необычный заголовок. Его необычность в том, что сделан он гиперссылкой, которая позволяет отследить событие :hover , то есть наведение. Выпадающий список будет работать при наведении курсора на заголовок.

CSS

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

/*Сбросим отступы*/ .droplink ul,.droplink h3,.droplink h3 a{ padding:0;margin:0 } /*Базовая обертка*/ .droplink { width:200px; position:absolute; margin:10px 0 0 25px } /*Стиль блока при наведении*/ .droplink:hover{ height:auto; background-color:#3E403D; border:solid 1px #3A3C39 } /*Заголовок в обычном состоянии*/ .droplink h3 a{ text-align:center; width:100%; display:block; padding:12px 0px; color:#999; text-decoration:none } .droplink h3 a img{border:none} /*Стиль для заголовка при наведении*/ .droplink:hover h3 a { color:#FFF; font-weight:bold; position:absolute }

Тут ничего особенного, указали размеры и стиль блока, стиль заголовка и для обеих элементов — их стили при наведении курсора. Идем дальше:

/*Скрываем список без наведения*/ .droplink ul{ list-style:none; display:none } /*Отображаем список при наведении*/ .droplink:hover ul{ display:block; margin-top:40px } .droplink li{display:block}

Этот код уже поинтереснее и показывает, как ведет себя выпадающий список при наведении курсора. В обычном состоянии стоит display:none, то есть он не отображается. При наведении — показываем его блоком. Вот и весь секрет. Теперь немного оформим элементы списка и вставим иконки:

/*Стиль элемента списка*/ .droplink li a{ padding:5px 12px 4px 34px; margin:1px; background-color:#484A47; display:block; color:#FFF; text-decoration:none; font-size:12px; background-repeat:no-repeat; background-position: 10px 3px } /*Стиль элемента при наведении*/ .droplink li a:hover{ background-color:#999 } /*Иконки*/ .facebook a {background-image:url("icons/facebook.png")} .twitter a {background-image:url("icons/twitter.png")} .vk a {background-image:url("icons/vk.png")} .rss a {background-image:url("icons/rss.png")} .gplus a {background-image:url("icons/gplus.png")}

Вот, собственно, и все. Выпадающий список готов и смотрится достаточно симпатично. Можно оформить элементы на свое усмотрение, добавить закругленных углов и прочих «примочек».

Если необходимо, чтобы список «перекрывал» текст под ним при наведении — смотрите в сторону z-index .

Если что-то непонятно или не получается — спрашивайте в комментариях или воспользуйтесь кнопкой «Отправить сообщение», она там —>

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

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

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

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

В следующем разделе я покажу примеры использования выпадающего списка HTML в JavaScript / JQuery . В примерах также будет показано, как задавать стили

Использование атрибута value

Как упоминалось ранее, значение атрибута value может отличаться от текста, выводимого на странице. Например, можно вывести для пользователей названия стран или цветов, а в атрибуте value использовать шорткоды.

В следующем примере мы создадим выпадающий список с атрибутом value :

Посмотреть онлайн демо-версию и код

Для тега

Пример получения доступа к выбранному варианту в JavaScript

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

Посмотреть онлайн демо-версию и код

Для option value HTML используется следующий код:

Следующая строка кода используется в JavaScript , чтобы получить доступ к значению атрибута value варианта значение отличается от текста. После того, как вы выберете цвет, jQuery отображает видимый текст в предупреждении. Код тега

Вот как обеспечивается доступ к этому значению в HTML select option selected JavaScript :

var selectedcolor = $("#jqueryselect option:selected").text();

Также можно получить доступ к значению с помощью JQuery-метода $.val() :

var selectedcolor = $("#jqueryselect").val();

Замените эту строку в приведенном выше примере, и код будет отображать шорткод / значение цвета в атрибуте value , а не видимый текст.