Css3 красивый select с двойным выпадающим списком. Выбор из выпадающего списка в HTML. Отключение пункта меню

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

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

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

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

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

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

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

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

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

1. Пример обычного HTML списка

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

HTML разметка списка

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

2. Пример HTML списка с соединительными линиями

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

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

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

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

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

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

К 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 код можно вставить в конец материала, пройдя в режим просмотра исходного кода. Учтите, что код скрипта может обрезаться редактором и, соответственно, не работать. В этом случае пройдите в настройки редактора и разрешите использование тега .

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

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

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

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

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

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

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

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

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

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

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

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

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

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

В уроке задействуем:

display: flex;
используем transition ;
будем позиционировать элементы при помощи position .

П ервым делом напишем разметку под горизонтальное меню. Открываем свою среду разработки в моем случае это PhpStorm , создаем index.html файл, пропишем каркас html:5 , заменю lang на ru .

Все meta удалю кроме кодировки, пропишу свой заголовок «Tom menu ».

Между body пишем тег header , а в нем блок с классом .dws-menu в котором будет находиться наше меню. Далее структура будет следующая, создадим списки в количестве пяти штук. В каждом списке будет ссылка с атрибутом href="#" . Затем будет идти иконка I с классом .fa .fa-

ul>li*5>a>i.fa.fa-

Жмем применить.

Пропишем название пунктов меню (Главная, Продукция, Услуги, Новости, Контакты ).

Далее отбираем и подключаем иконки. Переходим на сайт Font Awesome , отберем себе иконки под данные пункты меню:

Скачиваем архив с сайта с иконками, извлекаем его содержимое к себе на компьютер, копируем папку fonts и папку css в свою среду разработки.

В папке fonts лежат шрифты иконок, а в папке css их стили. Сжатые стили можно удалить font-awesome.min, подключим не сжатый font-awesome.css .

В index.html подключаем иконки, и прописываем каждому пункту свой стиль иконки (home , shopping-cart , cogs , th-list , envelope-open ).

Основной каркас мы сделали, подменю сформируем после описания основного стиля, а теперь создадим файл где будем описывать основные стили горизонтального меню style.css и подключим его к index.html . Для проверки, что стили подключены, создам папку img , в ней размещу произвольную картинку на задний фон. Пропишем подключение картинки при помощи background .

Body{ background-image: url("../img/ep_naturalwhite.png"); }

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

Dws-menu *{ margin: 0; padding: 0; }

Зададим header в 200 пик. и назначим шрифт Cuprum который можно скачать и отдельно подключить к себе на сайте, на всякий случай пропишем дополнительные шрифты.

Header{ margin: 200px; font-family: Cuprum, Arial, Helvetica, sans-serif; }

Скроем маркеры у списков:

Dws-menu ul, .dws-menu ol{ list-style: none; }

Списки отобразим по горизонтали при помощи display: flax , и делаем его по центру:

Dws-menu > ul{ display: flex; justify-content: center; }

В header сделаем отступ только сверху, пропишем margin-top .

Header{ margin-top: 200px; font-family: Cuprum, Arial, Helvetica, sans-serif; }

Оформим наше меню, зададим цвет кнопок, шрифт и т.д.

Dws-menu > ul li a{ display: block; background: #ececed; padding: 15px 30px 15px 40px; font-size: 14px; color: #454547; text-decoration: none; text-transform:uppercase; }

Затем позиционируем иконки, спискам присвоим position: relative; для дальнейшее центровки иконок:

Dws-menu > ul li{ position: relative; }

Dws-menu > ul li > a i.fa{ position: absolute; top: 15px; left: 12px; font-size: 18px; }

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

Dws-menu > ul li:first-child{ border-left: 1px solid #b2b3b5; } .dws-menu > ul li:last-child{ border-right: 1px solid #babbbd; }

Делаем разделители спискам LI :

Меню приобрело внешний вид, затем можно приступать к описанию стилей при наведении.

Dws-menu li a:hover{ background: #454547; color: #ffffff; box-shadow: 1px 5px 10px -5px black; transition: all 0.3s ease; }

И что бы этот эффект плавно исчезал, добавим этот стиль к ссылке в покое:

Основное меню закончили и можно приступать к описанию подменю и вложенные в них меню.

О ткрываем index.html и добавим, к примеру, в продукцию дополнительное меню. Между списками LI вставляем UL , в нем разместим пять списков, в которых будут находиться ссылки с атрибутом herf=”#” .

ul>li*5>a

Жмем применить, пропишем название пунктов (Одежда, Электроника, Продукты питания, Инструменты, Быт. химия ).

Одежда
Электроника
Продукты питания
Инструменты
Быт. химия

Затем открываем style.css и опишем стили подменю.

Отбираем второй список и присвоим ему position: absolute; , зададим минимальную ширину в 150 пик.

/*sub menu*/ .dws-menu li ul{ position: absolute; min-width: 150px; }

Пропишем спискам border в 1 пик.

Dws-menu li > ul li{ border: 1px solid #c7c8ca; }

Для ссылок в подменю установим отступы в 10 пик., уберем трансформацию текста и фон сделаем на пару тонов темнее background: #e4e4e5; .

Dws-menu li > ul li a{ padding: 10px; text-transform: none; background: #e4e4e5; }

Затем создадим еще одно вложенное меню. Перейдем в файл разметки и к примеру в "Электронике" формируем по аналогии меню как делали мы до этого. Описываем заголовки пунктов (Камеры, Компьютеры, Телефоны ) и сохраняемся.

Электроника
- Камеры
- Компьютеры
- Телефоны

Они вывелись, но скрыты под основным меню, теперь position: absolute; вложенного UL и сдвинем его на 150 пик. в сторону:

Dws-menu li > ul li ul{ position: absolute; right: -150px; top: 0; }

А для их появления отберем списки при наведении и отобразим их при помощи display: block; .

Dws-menu li:hover > ul{ display: block; }

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

Главная
Продукция
- Одежда
  - Обувь
  - Куртки
  - Брюки
- Электроника
  - Камеры
  - Компьютеры
  - Телефоны
    - Samsung
    - Flf
    - Apple
- Продукты питания
- Инструменты
- Быт. химия
Услуги
- Услуга 1
- Услуга 2
- Услуга 3
Новости
Контакты

Затем давайте завершающим этапам оформим кнопки ингредиентом. Я пользуюсь CSS генератором , у меня создано несколько Presets , вы можете создать свои, в моем случае я просто копирую данный код и размещаю в место background который прописывал до этого.

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

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

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

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

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

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

/*Сбросим отступы*/ .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 .

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

Популярное