Создание всплывающего списка в html. Элементы HTML форм — выпадающий список (теги select, option, optgroup), текстовое поле (textarea), а также применение label, fieldset и legend

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

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

HTML

Я сознательно опускаю общие моменты, вроде подключения стилей, чтобы код не разрастался. Внизу страницы я дам ссылку на исходники — там все есть.
Что у нас в 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 .

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

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

Сегодня мы разберем, как создавать выпадающие (раскрывающиеся) списки , в том числе со множественным выбором, при помощи select и option, каким образом сконструировать текстовое поле посредством textarea, а также поговорим о возможности расширения функциональности форм путем применения тегов fieldset, label и legend .

Напомню, что любая форма, присутствующая на странице, создается при помощи и предназначена для ввода какой-либо информации от пользователя и отправки ее на сервер (пример — ).

К сожалению, средства языка гипертекстовой разметки не позволяют напрямую обрабатывать эту информацию, поэтому с помощью HTML мы создаем лишь внешний вид формы, а необходимые данные отправляются для обработки. С этой целью на вебсервере целенаправленно создается специальный файл, написанный на одном из серверных языков (чаще всего, PHP). Скажем, для обратной связи можно сотворить файлик mail.php, который и будет являться обработчиком.

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

Эта информация крайне необходима, поскольку даже в случае использовании всех современных встроенных в инструментов разработчиков (напомню, первой ласточкой в реализации этого функционала был ), вы должны четко представлять себе механизм использования основных тегов, тогда редактирование кода HTML, необходимость которого возникает время от времени, превратится в приятное занятие.

2. Multiple — этот атрибут, не имеющий параметров, дает возможность множественного выбора в отличие от выше приведенного примера, где можно выбрать только один элемент (строчку). Попробуйте выделить в данном списке мышкой сразу несколько строк (по одной в любых местах, удерживая клавишу Ctrl, либо посредством Shift следующих подряд одна за одной):

3. Size — устанавливает высоту выпадающего списка, то есть количество отображаемых строк. Если присутствует атрибут multiple, а значение size не указано (как в примере выше), то по умолчанию отображается четыре строки , а, например, при size="5" будут видны уже пять:

4. Required (параметров не имеет) — определяет, что обязательно нужно сделать выбор перед отправкой данных обработчику. Если элемент из списка не выбран, то данные формы отправлены не будут:

5. Autofocus (значений не имеет) — устанавливает фокус на список сразу после загрузки страницы. Кроме того, если пользователь привык основную часть действий производить клавишами, то как раз такое предварительно настроенное фокусирование поможет делать выбор из списка посредством стрелок на клавиатуре без всякого использования мышки:

6. Disabled (параметров нет) — блокирует доступ к списку (отключает его). На практике обычно используется вместе со скриптами в тех случаях, когда нужно включать раскрывающийся список только при выполнении определенных условий:

7. Form — осуществляет связь списка с одной или несколькими формами, к которым он принадлежит, но находится вне контейнера

Не путайте атрибут тега select и основной тэг для создания формы. В примере выше к тегу form добавлен атрибут id="data", а к select — form="data", что и позволило связать выпадающий список с конкретной формой.

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

1. Value — определяет то значение из выпадающего списка, которое будет отправлено на сервер (обработчику формы). Собственно, обработчику отправляется имя, которое задается атрибутом name тега select, и значение value (для данного примера — 1, 2, 3, 4, 5), соответствующее выбранной строке выпадающего списка:

2. Disabled — блокирует для выбора элемент выпадающего списка.

Как видно из примера, строчка «Option» неактивна и выбрать ее невозможно.

3. Label — отображает текстовое содержание (являющееся его значением) того или иного элемента списка. Если label присутствует, то выводится строчка, тождественная значению этого атрибута и игнорируется текстовое содержание, находящееся внутри тега option. То же самое происходит, ежели содержимое между и вовсе отсутствует.

Смотрите. В выше предоставленном примере первая строка для option в коде пустая (в левой части таблицы), но прописан параметр label="Тег Option", в результате именно этот текст появился в списке (в правой части). Вторая строка кода в качестве содержимого тега option содержит текст «Тег Textarea», но в раскрывающемся списке справа отображается слово «Textarea», совпадающее со значением label="Textarea".

4. Selected — выделяет текущий пункт выпадающего списка:

Если присутствует атрибут multiple, то есть возможность выделения более одного элемента:

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

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

1. Label — устанавливает название каждой группы в качестве параметра:

То же самое, но с multiple и size="7" тега select:

2. Disabled (нет значений) — блокирует выбор элементов той группы, по отношению к которой он установлен, причем, неактивные пункты обычно выделены серым цветом:

Небольшой видеоролик будет здесь как нельзя кстати:

Текстовое поле в форме посредством textarea

Еще один элемент формы для сайта, который мы рассмотрим — поле с возможностью ввода в него многострочного текста. Его можно создать с помощью тега textarea. Без атрибутов по умолчанию применение этого тега даст такой результат:

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

Попробуем теперь добавить к первоначальному коду несколько атрибутов с параметрами:

1. Name — определяет имя текстовой области в качестве значения для ее идентификации после отправки данных формы при их обработке на сервере.

2. Cols — ширина поля, которая в роли параметра задается числом стоящих рядом одинаковых символов, размещенных по горизонтали. Значение по умолчанию — 20 .

3. Rows — высота текстового поля, определяемое количеством строк. Если число строк текста, вводимого пользователем, окажется больше значения, заданного этим атрибутом, то справа появится вертикальная полоса прокрутки.

4. Maxlength — указывает максимальное количество знаков, которые можно поместить в текстовое поле. При превышении лимита дальнейший ввод будет невозможен.

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

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

7. Readonly (без параметров) — ежели к textarea прикрутить данный атрибут, то текстовое поле окажется недоступным для изменения пользователями и будет предназначено только для чтения. Но на него можно навести фокус (подведите курсор к полю и щелкните левой кнопкой мышки), а также выделить и скопировать (частично или полностью) текст:

Еще несколько атрибутов, реализующих дополнительный функционал при заполнении полей:

8. Autoсomplete — указывает, должен ли браузер выдавать подсказки при заполнении формы пользователем на основании ранее вводимых данных и дает возможность автоматически вставлять подходящий текст.

Имеет всего два параметра : on (включен) и off (выключен). Вот пример кода:

Данный атрибут со значением «on» работает только тогда, когда в веб-обозревателе конкретного пользователя включено автозаполнение полей формы.

9. Wrap — устанавливает для браузера правила переноса строк в текстовой области с помощью трех значений:

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

Hard — переносы производятся автоматически, если текст не влезает в поле по ширине, причем, при отправке обработчику места таких переносов будут сохранены. Этот параметр используется только в связке с атрибутом cols :

Off — отключение переносов строк. Если напечатать текстовый фрагмент без механического переноса посредством клавиши «Enter», то весь текст будет помещен в одну строку, причем, появится горизонтальная полоса прокрутки:

10. Autofocus (не имеет параметров) — инициирует фокусирование на текстовое поле при загрузке страницы с формой.

11. Disabled — в отличие от атрибута readonly (который также запрещает редактировать содержимое поля, но дает возможность навести на него фокус), полностью блокирует доступ к текстовой области, которая окрашивается обычно в серый цвет:

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

|

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

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

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

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

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

Сейчас нам потребуется вооружиться 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-код, на котором мы и ставим акцент в нашем сегодняшнем руководстве. Начнем с оболочки:

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

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

Разметка

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-код

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

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

Разметка

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.

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

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

Green Yellow Black

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

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

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

Пример создания простого выпадающего списка

В этом примере HTML select option используется для создания выпадающего списка с тремя вариантами на выбор:

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

5 10 15 20 25

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

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

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

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

Для тега используется следующий код:

Maroon Green Yellow Blue Red

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

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

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

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

Maroon Green Yellow Blue Red Other

Следующая строка кода используется в JavaScript , чтобы получить доступ к значению атрибута value варианта :

var seltheme = document.getElementById(“selcolor”).value;

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

Получение доступа к видимому тексту в JQuery

На этот раз я буду использовать JQuery , чтобы получить доступ к значению выбранного варианта: как к тексту, так и к value . В этой демо-версии я буду получать доступ к видимому тексту в теге option в HTML :

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

В коде для каждого варианта в теге

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

Maroon Green Yellow Blue Red

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

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

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

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

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

Пример получения значения в скрипте PHP

В этом примере получения значения выбранного из выпадающего списка варианта форма создается с помощью тега в разделе разметки. После выбора цвета из выпадающего списка нажмите на кнопку “Submit ”. Данные формы будут передаваться в тот же PHP-файл , после чего отобразится выбранный цвет:

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

Метод формы, используемый в примере — POST , поэтому можно получить значения формы с помощью массива PHP $_POST[“”] . Это код формы, используемый в примере:

Select A Color:

Maroon Green Yellow Blue Red