Как создать раскрывающийся список с элементом выбора

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

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

Выпадающее меню — это список опций, который открывается вертикально, когда пользователь взаимодействует с меню, щелкнув его или наведя на него курсор.

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

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

Как создать выпадающий список HTML

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

Тег select имеет два основных атрибута: атрибуты name и id.

<select name="" id="">
  <option value="">...</option>
  // ...
</select>  

Этот атрибут используется name для идентификации раскрывающегося списка при отправке выбора в форме. Вы можете связать id атрибут с тем, label который имеет значения, аналогичные его for атрибуту.

<label for="languages">List of Languages:</label>
<select name="" id="languages">
  <option value="">...</option>
  // ...
</select>

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

<select name="" id="languages" required>
  // ...
</select>

// Or

<select name="" id="languages" disabled>
  // ...
</select>

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

<select name="language" id="language">
  <option value="javascript">JavaScript</option>
  <option value="python">Python</option>
  <option value="c++">C++</option>
  <option value="java">Java</option>
</select>

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

<select name="language" id="language">
  <option value="javascript" disabled>JavaScript</option>
  <option value="python">Python</option>
  <option value="c++">C++</option>
  <option value="java" selected>Java</option>
</select>

В приведенном выше коде первая опция имеет атрибут disabled, что означает, что вы не сможете выбрать эту опцию. Четвертый вариант имеет атрибут selected, означающий, что вместо JavaScript в качестве выбранного значения по умолчанию будет выбран Java.

Как создать выпадающее меню с возможностью наведения

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

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

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

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

<div class="dropdown">
  <button>Profile</button>
  <div class="dropdown-options">
    <a href="#">Dashboard</a>
    <a href="#">Setting</a>
    <a href="#">Logout</a>
  </div>
</div>

Это div служит контейнером, и вы можете настроить его на position из relative и display из inline-block, чтобы раскрывающиеся параметры отображались под меню.

.dropdown {
  display: inline-block;
  position: relative;
}

Вы можете стилизовать свою кнопку и dropdown-options так, как пожелаете. Но основной стиль, управляющий эффектом наведения, по умолчанию dropdown-options запрещает отображение. Затем, когда указатель мыши наводится на меню, отображение не устанавливается на block, поэтому параметры видны. Вы также устанавливаете значение position, absolute чтобы параметры отображались под меню, и overflow значение , auto чтобы включить прокрутку на маленьких экранах.

.dropdown-options {
  display: none;
  position: absolute;
  overflow: auto;
}

.dropdown:hover .dropdown-options {
  display: block;
}

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

Подведение итогов

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