Выпадающий список html css: Как создать выпадающее меню

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

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

Описание

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 — Дока

1. Кратко
2. Пример
3. Подробно
4. Атрибуты
   1. autocomplete
   2. autofocus
   3. disabled
   4. form
   5. multiple
   6. name
   7. required
   8. size
5. Подсказки
6. На практике
   1. Денис Ежков советует

Кратко

Секция статьи «Кратко»

Элемент <select> используется, когда нужно показать выпадающий список.

Пример

Секция статьи «Пример»

<form>  <label for="city-select">Ваш город</label>  <select name="city">    <option value="">-- Выберите город --</option>    <option value="petersburg">Санкт-Петербург</option>    <option value="samara">Самара</option>    <option value="perm">Пермь</option>    <option value="novosibirsk">Новосибирск</option>  </select></form>
           <form>
  <label for="city-select">Ваш город</label>
  <select name="city">
    <option value="">-- Выберите город --</option>
    <option value="petersburg">Санкт-Петербург</option>
    <option value="samara">Самара</option>
    <option value="perm">Пермь</option>
    <option value="novosibirsk">Новосибирск</option>
  </select>
</form>

Открыть демо в новой вкладке

Подробно

Секция статьи «Подробно»

В примере выше показано типовое использование элемента <select>. Это своего рода обёртка над списком опций, которые задаются тегом <option>. Чтобы иметь возможность отправить выбранное значение на сервер, необходимо выполнить несколько условий:

• задать тегу <select> атрибут name;
• задать каждому тегу <option> атрибут value. Если этот атрибут не задан, то его значение будет равно текстовому содержимому тега <option>.

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

<option> атрибут selected.

Внутри тега <select> могут использоваться только теги <option> и <optgroup>.

Атрибуты

Секция статьи «Атрибуты»

Тег <select> используется совместно с несколькими специфическими, а так же с большинством атрибутов для элементов форм.

autocomplete Секция статьи «autocomplete»

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

autofocus Секция статьи «autofocus»

Атрибут булевого типа (без значения, либо атрибут есть в теге, либо его нет совсем). Если он указан, то при загрузке страницы фокус будет автоматически помещён на наш выпадающий список.

disabled Секция статьи «disabled»

Атрибут булевого типа. Если задан, то выпадающий список отключается для взаимодействия с пользователем. Если атрибут не задан, то он может быть унаследован у одного из предков (например у контейнера <fieldset> или <form>. Если ни у одного предка вверх по дереву этот атрибут не задан, то выпадающий список доступен для взаимодействия.

form Секция статьи «form»

Атрибут указывает на элемент <form>, с которым связан выпадающий список. Значением атрибута должен быть id формы в пределах текущего документа. Если атрибут не задан, то <select> обязательно должен находиться внутри тега <form>. Но если задать атрибут, то нахождение внутри формы не обязательно и <select> может находиться в любом месте страницы.

multiple Секция статьи «multiple»

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

name Секция статьи «name»

Имя выпадающего списка. При отправке формы значение атрибута name будет ключом в отправляемом объекте.

required Секция статьи «required»

Атрибут булевого типа. Указывает, должен ли обязательно быть выбран какой-то пункт выпадающего списка, значение атрибута value которого — это не пустая строка. Атрибут учитывается при валидации формы при отправке. Если поле не заполнить, то при попытке отправки формы браузер покажет ошибку.

size Секция статьи «size»

Числовой атрибут. Если включён атрибут multiple

, то это число указывает на количество видимых пунктов списка.

Открыть демо в новой вкладке

Подсказки

Секция статьи «Подсказки»

💡 Выбрать несколько элементов списка, когда включён атрибут multiple, можно, используя клавиши Ctrl, Cmd и Shift. Клавиши Ctrl (Windows, Linux) и Cmd (Mac OS) работают одинаково. Мы зажимаем эту клавишу на клавиатуре, а затем кликаем мышкой в нужные пункты списка. Этим способом можно выбрать несколько пунктов, находящихся на разном расстоянии друг от друга. Если выбрать пункт списка, зажать клавишу Shift и выбрать любой другой, то будут выбраны последовательно все пункты списка между этими двумя.

На практике

Секция статьи «На практике»

Денис Ежков советует

Секция статьи «Денис Ежков советует»

🛠 Выпадающий список — это один из элементов формы, почти не поддающийся стилизации. Мы можем немного изменить внешний вид самого элемента <select>, но стилизовать выпадающий список опций можно не для всех браузеров. Многие дизайнеры любят рисовать нестандартные выпадающие списки в угоду красоте, но реализация таких списков очень трудоёмка на чистом HTML и CSS. Рекомендуется для выпадающих списков оставлять родной вид, потому что такие списки обладают рядом преимуществ перед нестандартными. Например, выпадающий список опций может выходить за границы окна браузера, давая пользователю возможность выбрать нужный элемент.

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

<form>  <label for="city-select">Нестандартная стрелочка</label>  <div>    <select name="city">      <option selected disabled>-- Выберите город --</option>      <option value="petersburg">Санкт-Петербург</option>      <option value="moscow">Москва</option>      <option value="kazan">Казань</option>      <option value="samara">Самара</option>      <option value="perm">Пермь</option>      <option value="novosibirsk">Новосибирск</option>    </select>  </div></form>
          <form>
  <label for="city-select">Нестандартная стрелочка</label>
  <div>
    <select name="city">
      <option selected disabled>-- Выберите город --</option>
      <option value="petersburg">Санкт-Петербург</option>
      <option value="moscow">Москва</option>
      <option value="kazan">Казань</option>
      <option value="samara">Самара</option>
      <option value="perm">Пермь</option>
      <option value="novosibirsk">Новосибирск</option>
    </select>
  </div>
</form>

В данном случае мы оборачиваем наш <select> дополнительным блоком, чтобы задействовать псевдоэлемент ::after этого блока. К сожалению, <select> относится к такому типу элементов, у которых нет своих псевдоэлементов ::before и ::after.

.select-wrapper {  position: relative;}.select-wrapper::after {  content: "⬇️";  position: absolute;  right: 0;  margin-top: -2px;  pointer-events: none;}select {  appearance: none;  width: 200px;  padding: 4px;  border-color: #aaa;  border-radius: 3px;}
          .select-wrapper {
  position: relative;
}
.select-wrapper::after {
  content: "⬇️";
  position: absolute;
  right: 0;
  margin-top: -2px;
  pointer-events: none;
}
select {
  appearance: none;
  width: 200px;
  padding: 4px;
  border-color: #aaa;
  border-radius: 3px;
}

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

Открыть демо в новой вкладке

Если вы нашли ошибку, отправьте нам пул-реквест!

Во время отправки формы что-то пошло не так. Попробуйте ещё раз?

←

<button>

alt + ←

→

<option>

alt + →

25+ ВЫПАДАЮЩЕЕ МЕНЮ CSS

25+ ВЫПАДАЮЩЕЕ МЕНЮ CSS

Только выпадающее меню CSS3

Автор

Pedro Nauck

Сделано с

HTML, CSS (SCSS)

Демо

Проверьте Demo

Links

Pure CSS Docdent Mud. Nagy

Сделано с помощью

HTML,CSS

Демо

Проверить демо

Ссылки

Скачать

Simple Pure CSS выпадает в меню

Автор

Connor Brassington

Сделано с

HTML (PUG), CSS (SCSS)

DEMO

Проверьте Demo

Links

Скачать

A Simple Demo

Скачать

A Simple Demo

8

A Simple Demo

8

A Simple Demo

8

. Автор

Майк Рохас

Сделано с

HTML(PUG),CSS(SCSS)

Демо

Проверить демо

Ссылки

Автор

Скачать

Простое3 меню

003

Hugh Balboa

Сделано с

HTML, CSS

ДЕМО

Проверьте демо

Ссылки

Скачать

CSS Menu Menu

. )

Демо

Проверить демо

Ссылки

Скачать

Адаптивное меню навигации Чистый CSS

Автор

Дженнинг

Сделано с

830009

ДЕМО

Проверьте демонстрацию

Ссылки

Скачать

Меню #Codepenchallenge

Автор

Ahmed NASR

Сделано с

.

Download

Swanky Pure CSS Drop Down Menu V2.0

Author

Jamie Coulter

Made With

HTML,CSS

Demo

8 Check Out Demo

4

Скачать

CSS раскрывающиеся меню переходы

Автор

Shaw

Сделано с

HTML, CSS (MESS)

DEMO

Проверьте демо

Links

Скачать

.

Зеландия

Сделано с

HTML,CSS

Демо

Проверить демо

Ссылки

Скачать

Pure CSS Drop down menu + Hover changes

30003

Brandon Loelein

Сделано с

HTML, CSS

ДЕМО

Проверьте демонстрацию

Скачать

.

Demo

Check Out Demo

Links

Download

Концепция выпадающего меню Zigzag

Author

Catalin Rosu

Made With

HTML, CSS

ДЕМО

Проверьте демонстрацию

Ссылки

Скачать

Выпадающее меню с помощью OnClick Trigger

Автор

999

. Демо

Ссылки

Загрузка

Пользовательское выпадающее меню Pure CSS

Автор

Silver Drop

Сделано с

HTML,CSS,JS

Проверить Демо 9 Демо

30009

Ссылки

Скачать

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

Автор

Endy Tran

Сделано с

HTML (HAML), CSS (MESS), JS

ДЕМО

Проверьте DEMO

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

Автор

Lukejacksonn

Сделано с

HTML, CSS (LESS), JS

ДЕМО

Проверьте демонстрацию

Ссылки

. Отвечая на ботинки 4 Menu — Light/Dark

80008 80008 800088

80008

8

80008

Grozdic

Сделано с

HTML,CSS,JS

Демо

Проверить демо

Ссылки

Скачать

Pure CSS3 Авторское выпадающее меню с анимацией (по вертикали)

3

30003

Rizky Kurniawan Ritonga

Сделано с

HTML, CSS, JS

ДЕМО

Проверьте демонстрацию

Appressive Bootstrap Mega Menu

Mega Menu

. ,CSS(LESS),JS

Demo

Check Out Demo

Links

Download

CSS3 Menu Dropdowns

Author

Colin

Made With

8 HTML, CSS (SCSS), JS

ДЕМО

Проверьте демонстрацию

Ссылки

Скачать

Mega Megu Bootstrap с несколькими раскрывающимися колонками

Author

Mahesh Bhagat

Сделано с

HOLML. JS

ДЕМО

Проверьте демо -демо

Ссылки

Скачать

Взаимодействие с выпадением меню

Автор

Aaron Iker

Сделано с

HTML, CSS (SCSS), JS

Demo

Demo

Demo

Demo

.0003

Check Out Demo

Links

Download

Custom Dropdown Menu #1

Author

Veronica

Made With

HTML,CSS,JS

Demo

Check Out Demo

Links

Download

Расширение окна поиска с раскрывающимся фильтром

Автор

Скотт Буллох

Сделано с помощью

HTML,CSS(SCSS),JS

Демо

Проверить демо

Ссылки

Скачать

---

Последнее сообщение

---

Создать раскрывающееся меню CSS с использованием HTML 5

 

Меню CSS создаются с использованием форматирования и позиционирования стандартного HTML. Базовая структура представляет собой просто вложенный список. Видимая часть меню — это самый внешний список, а раскрывающиеся части — это подсписки. Каждый элемент в списке является ссылкой на контент. Соответствующее форматирование листа изменяет отображение подменю в зависимости от того, находится ли указатель мыши над элементом внешнего списка. В зависимости от используемого метода подменю можно настроить так, чтобы оно отображалось за пределами экрана или вообще не отображалось, если только указатель мыши не находится над «Главным заголовком». Когда указатель мыши наводится на заголовок, внутренний список отображается, перекрывая внешний, так что главная страница «выпадает».

 

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

No related posts.