Содержание

Атрибут multiple | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
3.0+1.0+4.0+1.0+1.0+1.0+1.0+

Спецификация

HTML:3.24.015.0XHTML:1.01.1

Описание

Наличие атрибута multiple сообщает браузеру отображать содержимое элемента <select> как список множественного выбора. Конечный вид списка зависит от используемого атрибута size и браузера. При size=»1″ Firefox устанавливает высоту списка равной одному пункту, Safari и Chrome игнорируют size, Opera превращает список в «крутилку».

Для выбора нескольких значений списка применяются клавиши Ctrl и Shift совместно с курсором мыши.

ЧебурашкаКрокодил ГенаШапоклякКрыса ЛарисаЧебурашкаКрокодил ГенаШапоклякКрыса Лариса
Атрибут size отсутствуетАтрибут size равен 1

Синтаксис

HTML
<select multiple>...</select>
XHTML
<select multiple="multiple">...</select>

Значения

Нет.

Значение по умолчанию

По умолчанию этот атрибут выключен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег SELECT, атрибут multiple</title>
 </head>
 <body>

  <form action="handler.php">
    <p><select multiple size="1">
    <option>Чебурашка</option>
    <option>Крокодил Гена</option>
    <option>Шапокляк</option>
    <option>Крыса Лариса</option>
    </select></p>
  </form>

 </body>
</html>

HTML выпадающий список не работает



Это часть моего кода. Я пытаюсь работать с drop down. Я не могу выбрать выпадающие элементы. Если я удалил строку style="padding: 80px;" в последнем элементе <span> , это хорошо работает. Но мне нужна эта линия для выравнивания. Это Fiddle

<input type="text" name="city" maxlength=20 size=15/>
<span></span>
<select>
<option value="0" selected>Please Select</option>
<option value="tamilnadu">Tamilnadu</option>
<option value="kerala">Kerala</option>
<option value="karnataka">Karnataka</option>
</select> 
<span> City </span>
<span> State/Province </span>

Не могли бы вы сказать, в чем проблема в этом коде? Почему padding: 80px; вызывает проблему?

css drop-down-menu padding html
Поделиться Источник Linga     25 ноября 2013 в 06:43

6 ответов

  • Выпадающий список Bootstrap не работает в IE8

    Я использую фреймворк Bootstrap для разработки своего сайта. У меня есть выпадающий список, работающий в навигации, но по какой-то неизвестной причине в IE8 выпадающий список не работает. Когда вы нажимаете на ссылку о нас, выпадающий список появляется не полностью. Это происходит только в IE8. Он…

  • Выпадающий список не работает внутри div

    У меня возникли проблемы с выпадающим списком,я хочу, чтобы выбранный элемент списка был активен, когда выпадающий список свернется. В настоящее время выпадающий список работает таким образом, когда он помещается в основной контейнер, но когда выпадающий список помещается в div (называемый aBox2),…


2

Вам нужно переключиться с z-индексом.

См.: http://jsfiddle.net/3xBPL/7/

<select>
  <option value="0" selected>Please Select</option>
  <option value="tamilnadu">Tamilnadu</option>
  <option value="kerala">Kerala</option>
  <option value="karnataka">Karnataka</option>
</select> 

<span> State/Province </span>

Причина : Область пролета перекрывает поле выбора

Поделиться

Roy M J     25 ноября 2013 в 06:49


1

вместо padding:80px попробуйте дать padding-left:80px . Потому что заполнение элемента, перекрывающего <Select>

http://jsfiddle.net/3xBPL/9/

Поделиться Dinesh Kanivu     25 ноября 2013 в 06:49


1

padding:80px-это определенно проблема.

Вот скриншот Firebug: http://screencast.com/t/ISPMaYkyK1

Вот JSFiddle решения: http://jsfiddle.net/jrconway3/4gVUn/

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

padding-left: 80px;

Вы можете указать от «padding-left» до ONLY, чтобы установить левое заполнение. Это исправит ситуацию, чтобы вы могли правильно нажимать на элементы. Изменение z-индекса для разных элементов приведет к тому, что некоторые элементы будут иметь приоритет над другими, делая их похожими на другие элементы. Но это не решает корень проблемы.

Другие уже ответили на этот вопрос, но я уже начал писать, поэтому решил закончить его в любом случае.

Поделиться JaidynReiman     25 ноября 2013 в 06:55

  • HTml Select выпадающий список

    У меня есть форма с выпадающим списком select. Этот выпадающий список используется для различных видов поиска в базе данных. Поэтому он появляется на разных страницах html. Выпадающий список становится все больше по мере роста базы данных. На данный момент я должен изменить выпадающий список на…

  • каскадный выпадающий список не работает

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


1

Я думаю, что проблема в вашем промежутке, потому что промежуток начинается сверху. Он перекрывает коробку для утопления.

Пожалуйста, проверьте JSFIDDLE

Я редактирую этот код —

<input type="text" name="city" maxlength=20 size=15/>
<span></span>
<select>
  <option value="0" selected>Please Select</option>
  <option value="tamilnadu">Tamilnadu</option>
  <option value="kerala">Kerala</option>
  <option value="karnataka">Karnataka</option>
</select> 
<br>
<span> City </span>
 <!--<span> State/Province </span> -->
<span> State/Province </span>

Пожалуйста, используйте —

padding:0px 80px 80px 80px;

Поделиться Chinmay235     25 ноября 2013 в 07:00


0

ваш код перекрывается с вашим выпадающим списком

я положил его в fiddle

кроме того , я даю ему цвет, чтобы сделать его более заметным, попробуйте добавить несколько новых <br> , чтобы увидеть, как это происходит

span{

    background-color:red;
}

Поделиться Mohammad Hossein Amri     25 ноября 2013 в 06:53


-1

это потому, что с заполнением 80 пикселей вы расширите диапазон, и когда вы нажмете раскрывающийся список, веб-сайт скажет: «тот, который нажал, — это диапазон, а не раскрывающийся список, поэтому раскрывающийся список не будет просматриваться»

вы можете добавить границу, сделав это.. это объяснит вам более четко

<span> State/Province </span>

кстати, чего вы ожидаете от этого промежутка, используя padding:80px?

Поделиться b11r     25 ноября 2013 в 06:51

Похожие вопросы:


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

Я с помощью семантического меню в моем приложении веб-форм ASP.NET. Он прекрасно работает в этом fiddle . Но в моем приложении он не показывает выпадающий список при нажатии на селектор div. Кроме…


Выпадающий список в html

У меня есть выпадающий список для US Штатов в html. Но когда я просматриваю список, он расширяется по всей странице. Есть ли какой-нибудь способ ограничить это? Я не хочу отображать его с помощью…


HTML выпадающий список v/s автозаполнение textbox

В моем проекте(работа над Spring и hibernate) мне нужно сохранить около 22 HTML выпадающих списков для формы, каждый выпадающий список имеет около 30 000+ записей каждый выпадающий список извлекает…


Выпадающий список Bootstrap не работает в IE8

Я использую фреймворк Bootstrap для разработки своего сайта. У меня есть выпадающий список, работающий в навигации, но по какой-то неизвестной причине в IE8 выпадающий список не работает. Когда вы…


Выпадающий список не работает внутри div

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


HTml Select выпадающий список

У меня есть форма с выпадающим списком select. Этот выпадающий список используется для различных видов поиска в базе данных. Поэтому он появляется на разных страницах html. Выпадающий список…


каскадный выпадающий список не работает

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


Выпадающий список HTML не работает

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


не скрывайте выпадающий список HTML( <select> ) при выборе параметра отключено

У меня есть выпадающий список html(selectbox) с некоторыми отключенными значениями в моем коде html&angular. когда я нажимаю на отключенное значение, оно скрывает выпадающий список. можно ли…


Jquery выпадающий список не работает правильно

Я создавал выпадающий список с jquery, HTML и CSS. Я хочу закрыть выпадающий список, когда пользователь нажимает за пределами выпадающего списка. Но это не работает нормально. JS function…

Тег — раскрывающийся список

Поддержка браузерами

Описание

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

Элемент <select> может содержать два и более тегов <option>, определяющих доступные варианты выбора в раскрывающемся списке. Текст первого дочернего элемента <option> будет изначально отображаться в выпадающем списке, то есть будет являться значением по умолчанию для списка. Изменить или задать значение по умолчанию для <select> можно прописав атрибут selected к нужному варианту:

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="vw">VW</option>
  <option selected="" value="audi">Audi</option>
</select>

Ширина раскрывающегося списка будет определяться самым длинным текстом, указанным в теге <option>.

Атрибуты

autofocus:
Указывает, что элемент должен автоматически получить фокус при загрузке веб-страницы. Возможные значения логического атрибута autofocus: 

<select autofocus>
<select autofocus="autofocus">
<select autofocus="">
Пример »

Примечание: атрибут autofocus не поддерживается в IE9 и более ранних версиях, и в Firefox.

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

<select disabled>
<select disabled="disabled">
<select disabled="">
Пример »
form:
Определяет форму с которой связан элемент. В качестве значения атрибута выступает идентификатор элемента <form>. Этот атрибут позволяет размещать элемент <select> в произвольном месте документа, а не только в качестве потомка элемента <form>.

Примечание: атрибут form не поддерживается в Firefox.

multiple:
Указывает, что за один раз можно выбрать несколько вариантов. Выбор нескольких вариантов различается в зависимости от операционной системы:
  • Windows: удерживайте нажатой клавишу CTRL для выбора нескольких вариантов.
  • Mac: удерживайте нажатой клавишу CMD для выбора нескольких вариантов.
Возможные значения логического атрибута multiple: 

<select multiple>
<select multiple="multiple">
<select multiple="">
Пример »

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

name:
Определяет имя для раскрывающегося списка. Оно может быть использовано для доступа к данным формы после ее отправки или для ссылки на элемент в JavaScript.
size:
Указывает количество видимых вариантов в раскрывающимся списке. Если значение атрибута size больше 1, но меньше общего количества вариантов списка, то браузер автоматически добавит полосу прокрутки, чтобы указать, что есть еще варианты для просмотра. Пример »

Тег <select> так же поддерживает Глобальные атрибуты и События

Стиль по умолчанию

Нет.

Пример


<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

Результат данного примера в окне браузера:

Учебник HTML 5. Статья «Раскрывающийся список и текстовая область»

В этой статье мы с Вами рассмотрим элементы, которые позволяют создавать раскрывающиеся списки, научимся формировать группы в этих списках, рассмотрим как отключать пункты и даже группы списков, познакомимся с элементом, который позволяет создать многострочное текстовое поле, его в дальнейшем вы можете использовать внутри HTML форм (элемент <form>).

Раскрывающийся список

Тег <select> представляет собой элемент управления, который позволяет создать раскрывающийся список. Тег <option> определяет пункты раскрывающегося списка (параметры для выбора), он применяется как вложенный элемент тега <select>.

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

Давайте рассмотрим пример использования:

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования элемента <select></title>
	</head>
	<body>
		<select name = "blacklist">
			<option value = "2PAC">Tupac Amaru Shakur</option>
			<option value = "50cent">Curtis Jackson</option>
			<option value = "Snoop Dogg" selected>Calvin Cordozar Broadus, Jr.</option>
		</select>
	</body>
</html>

В этом примере мы тегом <select> создали раскрывающийся список, внутри него мы поместили три элемента <option>, которые определяют его пункты. Атрибутом selected указали, что третий пункт предопределен (будет выбран по умолчанию вместо первого).

Обращаю Ваше внимание на то, что необходимо использовать атрибут value (значение) тега <option>, чтобы указать какое значение отправляется на сервер для дальнейшей обработки.

В браузере это выглядит следующим образом:

Рис 38 HTML раскрывающийся список.

Отключение пункта меню

С помощью логического атрибута disabled (HTML тега <option>) допускается отключать определенный пункт меню (параметр). Атрибут может использоваться совместно со скриптами, например, пока какое-то условие не выполнено параметр неактивен.

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования HTML тега <option> в раскрывающемся списке</title>
	</head>
	<body>
		<select>
			<option value = "A">Option A</option>
			<option value = "B">Option B</option>
			<option value = "C" disabled>Option C</option>
		</select>
	</body>
</html>

В браузере это выглядит следующим образом:

Рис. 38а Пример использования атрибута disabled HTML тега <option> (отключение параметра).

Группировка пунктов меню

Давайте рассмотрим следующий тег <optgroup>, который используется для группировки связанных данных в раскрывающемся списке <select> и предназначен для более удобного представления информации пользователям.

Пример использования:

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования HTML тега <optgroup></title>
	</head>
	<body>
		<select  name = "black&white">
			<optgroup label = "Blacklist"> <!--Группа №1 -->
				<option value = "2PAC"> Tupac Amaru Shakur </option>
				<option value = "50cent"> Curtis Jackson </option>
				<option value = "Snoop Dogg" selected > Calvin Cordozar Broadus, Jr. </option>
			</optgroup>
			<optgroup label = "Whitelist"> <!--Группа №2 -->
				<option value = "Eminem">Marshall Bruce Mathers III</option>
			</optgroup>
		</select>
	</body>
</html>

В данном примере мы выделили 2 группы тегом <optgroup>. Атрибут label элемента задает наименование выделенной группы, выполненное полужирным начертанием:

Рис. 39 Группировка данных в раскрывающемся списке HTML.

В следующем примере с использованием логического атрибута disabled мы отключим одну группу («Group B«):

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования атрибута disabled HTML тега <optgroup></title>
	</head>
	<body>
		<select>
			<optgroup label = "Group A"> <!--Группа №1 -->
				<option>A.1</option>
			</optgroup>
			<optgroup label = "Group B" disabled> <!--Группа №2 (отключена)-->
				<option>B.1</option>
				<option>B.2</option>
			</optgroup>
			<optgroup label = "Group C"> <!--Группа №3 -->
				<option>C.1</option>
				<option>C.2</option>
				<option>C.3</option>
			</optgroup>
		</select>
	</body>
</html>

Результат нашего примера:

Рис. 39а Отключение группы (пример использования атрибута disabled HTML тега <optgroup>).

Отключение списка и мультивыбор

Далее мы с Вами рассмотрим пример в котором отключим целый список и составим список, в котором допускается выбрать несколько значений сразу:

<!DOCTYPE html>
<html>
	<head>
		<title>Атрибуты disabled и multiple тега <select></title>
	</head>
	<body>
		<select name = "firstlist" disabled> <!-- список отключен -->
			<option value = "1">1</option>
			<option value = "2">2</option>
			<option value = "3">3</option>
		</select>
		<select name = "secondlist" multiple> <!-- список с возможностью выбора нескольких значений -->
			<option value = "A">A</option>
			<option value = "B">B</option>
			<option value = "C">C</option>
			<option value = "D">D</option>
		</select>
	</body>
</html>

В этом примере мы создали два раскрывающихся списка. Для первого списка мы использовали атрибут disabled, который не дает взаймодействовать со списком (отключает его).

Для второго списка мы использовали атрибут multiple, который указывает, что допускается выбрать в списке несколько вариантов сразу (через Ctrl в Windows и через Command в Mac).

В браузере это выглядит следующим образом:

Рис. 39б Пример использования атрибутов disabled и multiple тега <select>.

Текстовая область

Тег <textarea> представляет собой поле формы для создания области многострочного ввода (текстовая область). Основное отличие от тега <input> (пользовательское поле для ввода информации) заключается в том, что допускаются переносы строк (они сохраняются при отправке данных на сервер).

Текстовая область может содержать неограниченное количество символов, как правило, текст внутри нее отображается браузерами моноширинным шрифтом Courier (курьер).

Давайте рассмотрим пример использования:

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования тега <textarea></title>
	</head>
	<body>
		<form>
			<textarea  name = "auth_msg" rows = "10" cols = "45">Здесь Вы можете написать информацию для автора…</textarea><br>
			<input type = "submit" name = "submitInfo" value = "отправить">
		</form>
	</body>
</html>

В данном примере мы создали текстовую область (HTML тег <textarea>), атрибутом name присвоили ей имя (name = «auth_msg»), атрибутом rows задали высоту строк равной десяти символам (rows = «10»), и атрибутом cols указали ширину поля равной 45 символов (cols = «45»).

Кроме того, мы разместили внутри формы кнопку, которая служит для отправки формы (элемент <input> с типом кнопки «отправка формы»: type = «submit»).

Результат нашего примера:

Рис. 40 Текстовая область в HTML.

Размеры текстовой области

Если атрибуты cols или rows указаны, то их значение должно быть положительным целым числом. Значение атрибута cols (ширина) по умолчанию 20 символов, а rows (высота) 2 символа .

Обращаю Ваше внимание, что вы можете задавать значение ширины и высоты текстовой области не только в символах, но и с использованием CSS свойств width (ширина) и height (высота), в этом случае браузер будет игнорировать значение атрибутов cols и rows если они указаны.

Давайте рассмотрим пример:

<!DOCTYPE html>
<html>
	<head>
		<title>Использование атрибута cols HTML тега <textarea></title>
	</head>
	<body>
		<form>
			<textarea cols = "10">Текстовое поле шириной 10 символов.</textarea>
			<textarea cols = "10" style = "width:200px">Текстовое поле шириной 10 символов и 200 пикселей.</textarea><br>
			<input type = "submit" cols = "submitInfo" value = "отправить">
		</form>
	</body>
</html>

В этом примере мы создали две текстовые области (элемент <textarea>), для первой и второй области атрибутом cols мы задали видимую ширину текстовой области 10 символов. Для второй текстовой области мы задали ширину элемента 200 пикселей с использованием встроенного CSS (свойство width). Как вы можете заметить, при этом браузер начинает игнорировать значение атрибута cols.

Кроме того, мы разместили внутри формы кнопку, которая служит для отправки формы (элемент <input> с типом кнопки «отправка формы»: type = «submit»).

Результат нашего примера:

Рис. 40а Использование атрибута cols HTML тега <textarea> (ширина элемента в символах и пикселях).

Отключение текстовой области

По аналогии с ранее рассмотренными элементами тег <textarea> имеет логический атрибут disabled, который указывает, что текстовая область должна быть отключена (недоступна для взаимодействия с пользователем). Атрибут может использоваться совместно со скриптами, например, пока какое-то условие не выполнено элемент неактивен.

Рассмотрим пример использования:

<!DOCTYPE html>
<html>
	<head>
		<title>Атрибуты disabled и name тега <textarea></title>
	</head>
	<body>
		<form>
			<textarea name = "userInfo">Текстовое поле доступно к заполнению.</textarea>
			<textarea name = "staticInfo" disabled>Текстовое поле не доступно к заполнению.</textarea><br>
			<input type = "submit" name = "submitInfo" value = "отправить">
		</form>
	</body>
</html>

В этом примере мы создали две текстовые области (элемент <textarea>), для первой и второй области атрибутом name мы задали уникальные имена. Для второй текстовой области атрибутом disabled мы указали, что она будет отключена при загрузке страницы.

Кроме того, мы разместили внутри формы кнопку, которая служит для отправки формы (элемент <input> с типом кнопки «отправка формы»: type = «submit»).

Результат нашего примера:

Рис. 40б Пример использования атрибутов disabled и name тега <textarea>.

Подсказка для текстовой области

И так мы с Вами рассмотрим заключительный пример и перейдем к практическому заданию статьи этого учебника.

Благодаря атрибуту placeholder (HTML тега <textarea>) допускается указывать текст подсказки, которая описывает ожидаемое значение для ввода пользователем в элемент.

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

Рассмотрим пример использования:

<!DOCTYPE html>
<html>
	<head>
		<title>Атрибуты placeholder и readonly тега <textarea></title>
	</head>
	<body>
		<form>
			<textarea placeholder = "Введите информацию в текстовое поле"></textarea>
			<textarea placeholder = "Поле доступно только для чтения" readonly></textarea><br>
			<input type = "submit" name = "submitInfo" value = "отправить">
		</form>
	</body>
</html>

В этом примере мы создали две текстовые области (элемент <textarea>), для первой и второй области атрибутом placeholder мы задали подсказку для пользователя, которая отображается бледным цветом текста внутри элемента. Для второй текстовой области атрибутом readonly мы указали, что оно будет доступно только для чтения (содержимое не может быть изменено).

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

Кроме того, мы разместили внутри формы кнопку, которая служит для отправки формы (элемент <input> с типом кнопки «отправка формы»: type = «submit»).

Результат нашего примера:

Пример использования атрибутов placeholder и readonly тега <textarea>.

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практическое задание:

  • Используя полученные знания составьте следующую форму размещения вакансии:

Практическое задание № 23.

Прежде чем преступить к выполнению задания откройте пример в новом окне и внимательно рассмотрите форму, чтобы повторить все её моменты. Для выполнения задания Вам потребуются знания из статьи «HTML формы». Если вы пропустили её, то вернитесь для её изучения.

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


Сортировка выпадающего списка

Сортировка выпадающего списка

Intended audience: XHTML/HTML coders (using editors or scripting), script developers (PHP, JSP, etc.).

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

Несмотря на то, что множество языков программирования имеют выпадающие списки элементов с возможностью сортировки элементов перед выводом на экран, HTML элемент <select> лишен подобного свойства. Он выводит элементы <options> в том порядке, в котором они указаны в коде. Соответственно, для вывода в нужном порядке их нужно отсортировать вручную или использовать различные вспомогательные инструменты разработчиков (например через XSLT преобразования).

Например, у нас имеется выпадающий список, состоящий из названий домашних животных. В списке содержатся следующие элементы в алфавитном порядке:

<form .....>
    <select size="1" name="pet">
       <option value='cat'>cat</option>
       <option value='dog'>dog</option>
       <option value='mouse'>mouse</option>
    </select>
...
...
</form>

Когда список оказывается переведенным на голандский язык, в нем присутствуют следующие элементы:

<form .....>
    <select size="1" name="pet">
       <option value='cat'>kat</option>
       <option value='dog'>hond</option>
       <option value='mouse'>muis</option>
    </select>
...
...
</form>

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

<form .....>
    <select size="1" name="pet">
       <option value='dog'>hond</option>
       <option value='cat'>kat</option>
       <option value='mouse'>muis</option>
    </select>
...
...
</form>

Подобная операция производится для каждого отображаемого языка.

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

Создаем стильные выпадающие списки

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

Обратите внимание на некоторые вещи, прежде чем мы начнем:

  • В примерах кода пропущены префиксы браузеров для CSS-свойств, но вы, конечно, можете найти их в исходных файлах.
  • Лично я использую бокс-модель, где [width] = [element-width] + [padding] + [borders]. Чтобы её активировать, необходим следующий фрагмент кода:

*,
*:after,
*:before {
    box-sizing: border-box;
}

Итак, с чего же мы начнем.

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

<div>
    <span>I’m kinda the label!</span>
    <ul>
        <li>I’m hidden!</li>
        <li>Me too!</li>
        <li>So do I.</li>
    </ul>
</div>

JavaScript

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

//…
 
obj.dd.on(‘click’, function(event){
    $(this).toggleClass(‘active’);
    return false;
});
 
//…
 
$(function() {
 
    var dd = new DropDown( $(‘#dd’) );
 
    $(document).click(function() {
        // all dropdowns
        $(‘.wrapper-dropdown-1’).removeClass(‘active’);
    });
 
});

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

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

Что ж, теперь мы понимаем, как это работает, я думаю, пришло время для создания примеров!

Пример 1

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

HTML-разметка

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

<div tabindex=»1″>
    <span>Пол</span>
    <ul>
        <li><a href=»#»>Мужской</a></li>
        <li><a href=»#»>Женский</a></li>
    </ul>
</div>

CSS

Давайте теперь перейдем к CSS. Начнем с обертки (враппера):

.wrapper-dropdown {
    /* размер и положение */
    position: relative; /* Enable absolute positioning for children and pseudo elements */
    width: 200px;
    padding: 10px;
    margin: 0 auto;
 
    /* цвет и фон */
    background: #9bc7de;
    color: #fff;
    outline: none;
    cursor: pointer;
 
    /* шрифт */
    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 &amp; 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.

Теперь зададим стили для элементов списка:

.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. Во-первых, мы делаем выпадающий список видимым, изменив его прозрачность до 1. 
  2. Далее, мы меняем направление и цвет маленькой стрелки.
  3. Затем мы изменим фон позади стрелки с помощью градиента.

JavaScript

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

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(‘Gender: ‘ + obj.val);
        });
    },
    getValue : function() {
        return this.val;
    },
    getIndex : function() {
        return this.index;
    }
}

Очень простой код: при нажатии на элемент мы получаем его значение и отображаем его в теге span.

Пример 2

Во втором примере мы создадим красивое меню для регистрации в различных социальных сетях.

HTML-разметка

<div>Регистрация
    <ul>
        <li><a href=»#»><i></i>Twitter</a></li>
        <li><a href=»#»><i></i>Github</a></li>
        <li><a href=»#»><i></i>Facebook</a></li>
    </ul>
</div>

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

CSS

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

.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 &amp; position */
    position: absolute;
    top: 100%;
    left: -5px;
    right: 0px;
 
    /* Styles */
    background: white;
    transition: all 0.3s ease-out;
    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;
}

И теперь, займемся стилями списка в раскрытом состоянии. Изменим направление стрелки, а раскрывающийся список станет видимым.

.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

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

HTML-разметка

<div tabindex=»1″>
    <span>Транспорт</span>
    <ul>
        <li><a href=»#»><i></i>Почта</a></li>
        <li><a href=»#»><i></i>UPS доставка</a></li>
        <li><a href=»#»><i></i>Частный самолет</a></li>
    </ul>
</div>

Кода не намного больше, чем раньше. Перейдем к 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 &amp; 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;
    border-bottom: 1px solid #e6e8ea;
    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;
}

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

.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;  
}

Мы использовали два псевдо-элемента для этой стрелки, так как мы хотим создать границу вокруг неё.

Теперь стили для раскрытого состояния. Все одно и то же. Тем не менее, обратите внимание, что мы установили переход к .dropdown немного дольше, чем обычно (0,5 вместо 0,3 с). Таким образом, открытие меню будет очень гладким.

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

JavaScript

Чтобы закончить этот демо-пример, мы должны добавить немного JavaScript, чтобы заменить значение выбранной кнопки по умолчанию. Мы видели, как это делается в первом примере, но, поскольку мы не оставляем слово «Транспорт» здесь, то 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

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

HTML-разметка

<div>Сделать
    <ul>
        <li><input type=»checkbox» name=»el-1″ value=»donut»><label for=»el-1″>Съесть пирожок</label></li>
        <li><input type=»checkbox» name=»el-2″ value=»neighbour»><label for=»el-2″>Следить за соседями</label></li>
        <li><input type=»checkbox» name=»el-3″ value=»T-rex»><label for=»el-3″>Покормить кота</label></li>
    </ul>
</div>

Здесь нибудет ни ссылок, ни значков. Для каждого элемента, у нас есть две тега: чекбокс с лейблом.

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 &amp; 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, потому что мы должны немного сдвинуть его вниз из-за границы обертки.

.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 */
 
.wrapper-dropdown-4 .dropdown li:hover label {
    background: #f0f0f0;
}
 
/* Checked state */
 
.wrapper-dropdown-4 .dropdown li input:checked ~ label {
    color: grey;
    text-decoration: line-through;
}

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

Когда флажок установлен, текст становится серым и перечеркнутым. Просто, но эффективно.

У нас есть еще две тонкие красные линии слева в нашей маленькой записной книжке. Есть два способа сделать это: один с псевдо-элементами и один с градиентами. Давайте посмотрим на оба варианта.

/* красные линии с псевдо-элементами */
.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;
}
 
/* Или: */
/* красные линии при помощи градиента */
 
.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), в отличии от градиентов (не поддерживаются до IE10).

Теперь стили для раскрытого состояния. Ничего нового здесь нет.

/* 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

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

HTML-разметка

<div tabindex=»1″>Иван Иванов
    <ul>
        <li><a href=»#»><i></i>Профиль</a></li>
        <li><a href=»#»><i></i>Настройки</a></li>
        <li><a href=»#»><i></i>Выйти</a></li>
    </ul>
</div>

CSS

.wrapper-dropdown-5 {
    /* Size &amp; 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 &amp; 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;. Ну и так далее.

Заключение.

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

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

Скачать исходные файлы

Перевод статьи с tympanus.net/codrops


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

Список — HTML

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

В какой категории искать?

Для создания такого выпадающего списка используется тег <select> с вложенными внутри него тегами <option>. Всё это похоже на создание обычных списков, где вместо ul/ol используется <select>, а вместо li используется <option>. Также часто первый пункт списка используется для заголовка всего выпадающего списка. В таком случае для него используют атрибут disabled, чтобы заблокировать его для выбора.

<form>
    <select>
        <option disabled>Какой курс вы хотите пройти?</option>
        <option>JS</option>
        <option>PHP</option>
        <option>Java</option>
        <option>Racket</option>
        <option>HTML</option>
        <option>CSS</option>
    </select>
</form>

Какой курс вы хотите пройти?JSPHPJavaRacketHTMLCSS

Список внутри формы также может быть представлен в виде списка, в котором можно выбрать несколько элементов. Делается это с помощью зажатия кнопки ctrl и клика мышки по полям, которые мы хотим выбрать.

В какой категории искать?

Для того, чтобы создать список с множественным выбором, у тега <select> добавляется атрибут multiple

<form>
    <select multiple>
          <option>JS</option>
          <option>PHP</option>
          <option>Java</option>
          <option>Racket</option>
          <option>HTML</option>
          <option>CSS</option>
    </select>
</form>

Задание

Создайте форму, у которой файл с обработчиком данных лежит по адресу /people. Внутри формы создайте выпадающий список из трёх элементов.

Нашли ошибку? Есть что добавить? Пулреквесты приветствуются https://github.com/hexlet-basics

HTML-тег выбора


Пример

Создайте раскрывающийся список с четырьмя вариантами:

Выбери машину:

<выбрать name = "cars">




Попробуй сам »

Дополнительные примеры «Попробуйте сами» ниже.

Определение и использование

Элемент чаще всего используется в форме для сбора пользовательского ввода.

Атрибут name необходим для ссылки данные формы после отправки формы (если вы опустите name , данные из раскрывающегося списка отправляться не будут).

Атрибут id необходим для связи раскрывающийся список с меткой.

Теги

Атрибуты событий

Тег с тегами:


Попробуй сам »

связанные страницы

Ссылка на HTML DOM: выберите объект

Учебное пособие по CSS: стилизация форм

Настройки CSS по умолчанию

Нет.



HTML DOM Выбрать объект

Выбрать объект

Объект Select представляет элемент HTML , используя getElementById ():

Совет: Вы также можете получить доступ к объекту Select, выполнив поиск в коллекции элементов формы.

Создать объект выбора

Вы можете создать элемент



Элементы HTML-формы

В этой главе описаны все различные элементы формы HTML.

Элементы HTML

Элемент HTML может содержать один или несколько из следующих элементов формы:

  • <вход>
  • <метка>
  • <выбрать>

  • Попробуй сам »

    Атрибут строк определяет видимое количество строк в текстовая область.

    Атрибут cols определяет видимую ширину текста. область.

    Вот как HTML-код выше будет отображаться в браузере:

    Кот играл в саду.

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

    Пример

    Попробуй сам »

    Элемент

    Попробуй сам »

    Вот как HTML-код выше будет отображаться в браузере:

    Нажми на меня!

    Примечание: Всегда указывайте атрибут type для элемента кнопки. Разные браузеры могут использовать разные типы по умолчанию для элемента кнопки.

    Элементы

    и

    Элемент

    используется для группировки связанных данных в форме.

    Элемент определяет заголовок для

    элемент.

    Пример



    Personalia:











    Попробуй сам »

    Вот как HTML-код выше будет отображаться в браузере:

    Элемент

    Элемент определяет список предопределенных опций для элемента .

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

    Атрибут list элемента должен ссылаться на id атрибут элемента .

    Пример





    Попробуй сам »

    Элемент

    Элемент представляет результат вычисления (например, выполняется по сценарию).

    Пример

    Выполните вычисление и покажите результат в элементе :

    oninput = «x.value = parseInt (a.value) + parseInt (b.value)»>
    0

    100 +

    =





    Попробуй сам »

    Упражнения HTML

    Элементы HTML-формы

    Тег Описание
    <форма> Определяет HTML-форму для пользовательского ввода
    <вход> Определяет элемент управления вводом