Способ создания выпадающего списка html. Создаем стильные выпадающие списки

Древовидный вид HTML списков является лучшим вариантом визуального обзора и изучения их иерархической структуры. Рассмотрим несколько преобразований обычного HTML списка в более наглядное древовидное состояние при помощи магии CSS стилей.

• Главное меню
  • База знаний
    • Компоненты
    • Плагины
    • Модули
  • Отзывы
  • Контакты

• Главное меню
  • База знаний
    • Компоненты
    • Плагины
    • Модули
  • Отзывы
  • Контакты

Присвоим тегу

класс treeline для создания соединительных линий каждого раздела списка.
• Главное меню
  • База знаний
    • Компоненты
    • Плагины
    • Модули
  • Отзывы
  • Контакты
HTML разметка списка с соединительными линиями
/* Присваиваем класс treeline */
• Главное меню
  • База знаний
    • Компоненты
    • Плагины
    • Модули
  • Отзывы
  • Контакты
CSS стили списка с соединительными линиями .treeline, .treeline ul, .treeline li { margin: 0; padding: 0; line-height: 1.2; list-style: none; } .treeline ul {margin: 0 0 0 15px; /* отступ вертикальной линии */} .treeline > li:not(:only-child), .treeline li li { position: relative; padding: 3px 0 0 20px; /* отступ текста */ } /* Стиль вертикальной линии */ .treeline li:not(:last-child) { border-left: 1px solid #ccc;} /* Стили горизонтальной линии*/ .treeline li li:before, .treeline > li:not(:only-child):before { content: ""; position: absolute; top: 0; left: 0; width: 1.1em; height: .7em; border-bottom:1px solid #ccc; } /* Вертикальная линия последнего пункта в списка */ .treeline li:last-child:before { width: calc(1.1em - 1px); border-left: 1px solid #ccc; } 3. Пример раскрывающегося HTML списка
• Главное меню
  • База знаний
    • Компоненты
    • Плагины
    • Модули
  • Отзывы
  • Контакты
HTML разметка раскрывающегося списка

К предыдущей разметке добавляем + для реализации функции раскрытия элементов древовидного списка.

• Главное меню
  • +База знаний /* Блок раскрытия списка */
    • Компоненты
    • Плагины
    • Модули
  • Отзывы
  • Контакты
CSS стили раскрывающегося списка

К CSS из предыдущего примера необходимо дописать следующие стили:

Treeline .drop { position: absolute; left: -6px; top: 5px; width: 11px; height: 11px; line-height: 1em; text-align: center; background: #9F9F9F; color: #fff; /* Фон и цвет кнопки, раскрывающей список */ font-size: 78%; /* Размер +/- */ cursor: pointer; -webkit-user-select: none; -moz-user-select: none; } .treeline li:last-child > .drop {margin-left: 1px;} .treeline .drop + ul {display: none;} .treeline .dropM + ul {display: block;}

Скрипт, реализующий функцию раскрывающегося списка

Помимо HTML и CSS, данный способ оформления древовидных списков требует использование JS:

$(function() { var ul = document.querySelectorAll(".treeline > li:not(:only-child) ul, .treeline ul ul"); for (var i = 0; i < ul.length; i++) { var div = document.createElement("div"); div.className = "drop"; div.innerHTML = "+"; ul[i].parentNode.insertBefore(div, ul[i].previousSibling); div.onclick = function() { this.innerHTML = (this.innerHTML == "+" ? "−" : "+"); this.className = (this.className == "drop" ? "drop dropM" : "drop"); } } })();

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

4. Пример вертикального древовидного списка
• Главное меню
  • База знаний
    • Компоненты
    • Плагины
    • Модули
  • Отзывы
  • Контакты
HTML разметка вертикального древовидного списка
/* Присваиваем класс treevertical */
• Главное меню
  • База знаний
    • Компоненты
    • Плагины
    • Модули
  • Отзывы
  • Контакты
CSS стили вертикального древовидного списка .treevertical, .treevertical ul { position: relative; display: table; margin: 5px 0 0 0 !important; padding: 6px 0 0 0 !important; line-height: normal; text-align: center; word-wrap: break-word; word-break: break-all;} .treevertical li { position: relative; display: table-cell;} /* Отступ между пунктами */ .treevertical li:not(:only-child) {padding: 0 .5em;} .treevertical li:last-child {padding-right: 0;} .treevertical li:first-child {padding-left: 0;} /* Стили линий */ .treevertical ul:before, .treevertical ul li:before, .treevertical ul li:after { content: ""; position: absolute; top: -5px; left: 0; width: 50%; height: 5px; border-right: 1px solid #999;} .treevertical ul:before {top: -4px;} .treevertical ul li:not(:only-child):before {border-top: 1px solid #999;} .treevertical ul li:not(:only-child):first-child:before { right: 0; left: auto; border-left: 1px solid #999; border-right: none;} .treevertical ul li:not(:only-child):first-child:before, .treevertical ul li:not(:only-child):last-child:before { width: calc(50% + .5em/2); } .treevertical ul li:after {border: none;} .treevertical ul li:not(:last-child):not(:first-child):after { width: 100%; border-top: 1px solid #999; }

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

Ранее, чтобы создать выпадающий список в html (на англ. — dropdown ), мы просто использовали и . Факт в том, что мы и сейчас может его использовать, но зачастую нам нужно менять стили и адаптировать цветовую гамму выпадающего списка под стиль дизайна. К сожалению, не всегда получается стилизовать так как хочется, потому что select и option имеют свои ограничения и плохую поддержку кроссбраузерности.

Специально для этой статьи, я нашел 16 разных примеров, которые могут пригодиться во время разработки сайта. И так приступим.

1. Настраиваемый список

Html шаблон, который позволяет настроить собственные цвета на выпадающего списка.

2. Сделанный на CSS3/JavaScript

Написан на CSS3 и JavaScript. Обычный выпадающий список.



3. Стиль: станции метро

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



4. Dropy. Написанное на SCSS & jQuery



5. Для длинных выдающих списков

Отличное решение для длинных выпадающих меню.



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



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



8. Стильное меню настроек пользователя



9. CSS3 выпадающий список



Сделано в стиле UI, подойдет под UI стилистику сайта.





12. Выбор флага

Dropdown в стиле выбора страны.


13. Обычный HTML, CSS dropdown



Надеюсь вам понравилось моя подборка. Оставляйте комментарии, делитесь мнением и присылайте собственные работы!

Как сделать выпадающий список в html (подборка ТОП 16) от bologer

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

Пункт 1 Пункт 2

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

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

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

multiple

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

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

В примере 1 показано создание списка множественного выбора.

Пример 1. Список множественного выбора

HTML5 IE Cr Op Sa Fx

Список

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

name

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

size

Устанавливает высоту списка. Если значение size равно единице, то список превращается в раскрывающийся. Значение по умолчанию зависит от атрибута multiple . Если он присутствует, то размер списка равен числу элементов. Когда multiple нет, то значение атрибута size равно 1.

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

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

selected

Делает текущий пункт списка выделенным. Если у тега добавлен атрибут multiple , то можно выделять более одного пункта.

value

Определяет значение пункта списка, которое будет отправлено на сервер. На сервер отправляется пара «имя/значение», где имя задаётся атрибутом name тега , а значение - атрибутом value выделенных пунктов списка. Значение может как совпадать с текстом пункта, так быть и самостоятельным.

label

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

Создание списка показано в примере 2.

Пример 2. Использование списка

HTML5 IE Cr Op Sa Fx

Список

Выбери персонажа

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

Группирование элементов списка

При достаточно обширном списке имеет смысл сгруппировать его элементы по блокам, чтобы обеспечить наглядность списка и удобство работы с ним. Для этой цели применяется тег . Он представляет собой контейнер, внутри которого располагаются теги объединённые в одну группу. Особенностью тега является то, что он не выделяется как обычный элемент списка, акцентируется с помощью жирного начертания, а все элементы, входящие в этот контейнер, смещаются вправо от своего исходного положения. Для добавления заголовка группы используется атрибут label , как показано в примере 3.

Пример 3. Группирование элементов списка

HTML5 IE Cr Op Sa Fx

Список

Закуска Барская Раки, фаршированные по-царски Биточки в горшочке Галушки славянские Пампушки украинские Жаркое по-харьковски

Результат примера показан на рис. 1.

Рис. 1. Группированный список

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

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

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

Давайте

Пример использования элемента Tupac Amaru Shakur Curtis Jackson Calvin Cordozar Broadus, Jr.

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

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

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

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

в раскрывающемся списке Option A Option B Option C

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

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

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

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

Пример использования HTML тега Tupac Amaru Shakur Curtis Jackson Calvin Cordozar Broadus, Jr. Marshall Bruce Mathers III

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

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

Пример использования атрибута disabled HTML тега A.1 B.1 B.2 C.1 C.2 C.3

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

Отключение списка и мультивыбор Атрибуты disabled и multiple тега 1 2 3 A B C D

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

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

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

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

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

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

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

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

Атрибуты disabled и name тега Текстовое поле доступно к заполнению. Текстовое поле не доступно к заполнению.


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

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

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

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

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

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

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

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

Атрибуты placeholder и readonly тега


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

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

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

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

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

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

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

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

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

Тег 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

А вот как PHP-скрипт используется, чтобы получить значение HTML select option :

Если в форме указан метод GET , тогда используйте PHP-массив $_GET[“”] .

Определение стилей выпадающего списка с помощью CSS

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


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

Вместе с linear-gradient здесь использовано свойство box-shadow . Полный код CSS выглядит следующим образом:

Selcls { padding: 3px; border: solid 1px #517B97; outline: 0; background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #CAD9E3), to(#FFFFFF)); background: -moz-linear-gradient(top, #FFFFFF, #CAD9E3 1px, #FFFFFF 25px); box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; -moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; -webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; width:150px; }

Закругленные углы с помощью свойства border-radius

Для HTML select option мы зададим свойство CSS3 border-radius , чтобы сделать закругленные углы. Цветовая гамма также изменяется. Вы можете экспериментировать с рамками, шириной, полями и другими свойствами, как захотите:


Посмотреть онлайн демо-версию и код Использование нескольких атрибутов и стилей CSS

Чтобы дать пользователям возможность выбирать из списка несколько вариантов, нужно использовать атрибут multiple . В приведенном выше примере может быть выбран только один вариант. При использовании multiple можно выбрать несколько вариантов, нажав клавишу CTRL :


Посмотреть онлайн демо-версию и код Использование фреймворка Bootstrap и плагинов для создания красивых выпадающих списков

Если вы используете фреймворк Bootstrap , то у вас есть возможность применять плагины для создания крутых option HTML .