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

Leave a Comment / Html / By /

— HTML — Дока

Кратко

Скопировано

Элемент <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

Скопировано

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

autofocus

Скопировано

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

disabled

Скопировано

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

form

Скопировано

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

multiple

Скопировано

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

name

Скопировано

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

required

Скопировано

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

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

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

Тег select — выпадающий список

Тег select создает выпадающий список для использования в HTML формах.

Отдельный пункт списка должен храниться в теге option.

Атрибуты

АтрибутОписание
multiple Наличие данного атрибута создает мультиселект
— выпадающий список, в котором можно выбрать несколько пунктов, зажав клавишу контрол (Ctrl) или выделив их мышкой.
Необязательный атрибут. Пользоваться так: <select multiple> или так <select multiple=»multiple»>.
name Имя выпадающего списка. Нужно для того, чтобы достать данные поля ввода в PHP. Для корректной работы формы имена полей ввода не должны совпадать друг с другом (в одной форме). Если они совпадают — в PHP придут данные того поля ввода, которое ниже в HTML коде.

Пример

Давайте посмотрим, как работает выпадающий список:

<select> <option>Москва</option> <option>Минск</option> <option>Киев</option> <option>Лондон</option> </select>

:

Пример

Давайте ширину выпадающего списка сделаем равной ширине самого большого элемента (если она не будет явно указана с помощью CSS свойства width):

<select> <option>Москва - столица России</option> <option>Минск</option> <option>Киев</option> <option>Лондон</option> </select>

:

Пример . Выбор по умолчанию

А теперь давайте попробуем выбрать по умолчанию город Минск. Сделаем это с помощью атрибута selected:

<select> <option>Москва - столица России</option> <option selected>Минск</option> <option>Киев</option> <option>Лондон</option> </select>

:

Пример .

Мультиселект

Давайте теперь превратим обычный select в

мультиселект с помощью атрибута multiple. Для этого зажмем клавишу контрол (ctrl) и, не отпуская ее, можем выбрать несколько пунктов выпадающего списка. Или же просто выделим мышкой несколько пунктов (зажмием левую кнопку и выделяем).

<select multiple name="city[]"> <option>Москва - столица России</option> <option>Минск</option> <option>Киев</option> <option>Лондон</option> </select>

:

Пример . Несколько значений по умолчанию в мультиселекте

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

<select multiple name="city[]"> <option>Москва - столица России</option> <option selected>Минск</option> <option>Киев</option> <option selected>Лондон</option> </select>

:

Смотрите также

  • атрибут selected,
    который задает выбранный по умолчанию пункт списка
  • тег optgroup,
    который группирует пункты списка
  • тег datalist,
    который создает выпадающий список

раскрывающихся списков CSS | HTML Собака

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

HTML Dog имеет долгую историю с раскрывающимися списками — мы выделили популярный метод Suckerfish Dropdowns еще в 2003 году. Однако с тех пор стандарты и браузеры прошли долгий путь, и теперь мы можем безопасно использовать гораздо более простую технику, используя CSS без необходимости для любого JavaScript.

Многоуровневые выпадающие списки.

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

Реклама здесь!

На давно известном, хорошо читаемом и уважаемом ресурсе веб-разработки.

HTML: Красиво вложенные списки

Как и любая хорошая навигация, списка ссылок — лучший вариант для структурирования раскрывающихся списков. Так как мы хотим, чтобы один элемент раскрывал группу подэлементов, нам наверняка нужно вложенных списка — то есть список списков:

<ул>
    
  • 
        Птицы
        <ул>
            
  • Ратиты
    • 
            
  • Птица
    • 
            
  • Неоавес
    • 
        
    
    
  • 
        Млекопитающие
        <ул>
            
  • Монотремы
    • 
            
  • Сумчатые
    • 
            
  • Плацентарные
    •

    Итак, у нас есть «Птицы» и «Млекопитающие» в качестве предметов верхнего уровня, а «Крысы», «Однопроходные» и так далее в качестве предметов второго уровня, подкатегории.

    Использовать ссылки. Всегда используйте ссылки. Если вас больше всего интересуют подкатегории (например, «Крысоловы» и «Однопроходные»), подумайте, по крайней мере, о том, чтобы основные элементы (например, «Птицы» и «Млекопитающие») ссылались на страницу со стандартной навигацией. на страницы подкатегорий. Основная причина этого — доступность — как уже отмечалось, посетители вашей страницы не всегда будут использовать указывающее устройство (которое, конечно, требуется для наведения и открытия подменю).

    CSS: самое необходимое

    Чтобы настроить все это визуально, давайте обнулим отступы по умолчанию (и поля для старых браузеров) списков:

    ул {
    заполнение: 0;
    маржа: 0;
}

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

    .
    ли {
    дисплей: встроенный;
    положение: родственник;
}

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

    уль уль {
    положение: абсолютное;
    дисплей: нет;
}

    Чтобы приспособиться к более старым браузерам, вы также можете явно расположить подсписки, добавив к этому слева: 0 и сверху: 100% .

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

    ли: наведите ул {
    дисплей: блок;
}

    Первый сопровождающий пример показывает это в действии вместе с поясняющими встроенными комментариями (см. исходный код).

    Многоуровневые раскрывающиеся списки

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

  • 
    Млекопитающие
    <ул>
        
  • 
            Монотремы
            <ул>
                
  • Ехидны
    • 
                
  • Утконос
    • 
            
        
        
  • 
            Сумчатые
            <ул>
                
  • Опоссумы
    • 
                
  • Нумбаты и т.  д.
    • 
                
  • Бандикуты и т. д.
    • 
                
  • Кенгуру, коалы, вомбаты и т. д.
    • 
            
        
        
  • 
            плацентарные
            <ул>
                
  • Приматы, копытные и т. д.
    • 
                
  • Муравьеды, ленивцы и т. д.
    • 
                
  • Слоны и т. д.
    •

    Теперь, чтобы обрабатывать эти новые под-подсписки немного по-другому, мы хотим, чтобы они отображались сбоку от своих элементов родительского списка, а не под ними:

    ул уль уль {
    слева: 100%;
    сверху: 0;
}

    Нужна небольшая поправка. В его нынешнем виде будут показаны все списка потомков элемента списка, на который наведен курсор. Таким образом, при наведении курсора на «Млекопитающие» в этом примере будут показаны не только «Однопроходные», «Сумчатые» и «Плацентарные», но и все виды сумчатых — «Оппоссумы» и так далее. Нам нужен только первый потомок — детей (не внуков) — показать. Поэтому мы изменяем li:hover ul , вставляя дочерний селектор :

    .
    li: наведите курсор > ул {
    дисплей: блок;
}

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

    Очень красивая

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

    Раскрывающийся список — Материализация

    Имя Тип По умолчанию Описание
    выравнивание Строка ‘левый’ Определяет границу, по которой выравнивается меню.
    автотриггер Булево значение правда Если true, автоматически фокусировать раскрывающийся список для клавиатуры.
    ограниченная ширина Булево значение правда Если true, ограничить ширину до размера активатора раскрывающегося списка.
    контейнер Элемент ноль Укажите элемент, который будет ограничивающим контейнером раскрывающегося списка.
    крышка триггера Булево значение правда Если false, раскрывающийся список будет отображаться под триггером.
    закрытьОнклик Булево значение правда Если true, закрывать раскрывающийся список при щелчке элемента.
    наведение Булево значение ложь Если true, раскрывающийся список будет открываться при наведении.
    Продолжительность Номер 150 Продолжительность перехода введите в миллисекундах.
    outDuration Номер 250 Продолжительность перехода в миллисекундах.
    на OpenStart Функция ноль Функция вызывается при открытии раскрывающегося списка.
    на OpenEnd Функция ноль Функция вызывается после завершения ввода раскрывающегося списка.
    onCloseStart Функция ноль Функция вызывается, когда раскрывающийся список начинает закрываться.
    onCloseEnd Функция ноль Функция вызывается после закрытия раскрывающегося списка.

    Имя Тип Описание
    эль Элемент Элемент DOM, которым был инициализирован подключаемый модуль.

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *