Содержание

Поле со списком | htmlbook.ru

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

<select атрибуты>
  <option атрибуты>Пункт 1</option>
  <option атрибуты>Пункт 2</option> 
</select>

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

ЧебурашкаКрокодил ГенаШапоклякКрыса ЛарисаЧебурашкаКрокодил ГенаШапоклякКрыса Лариса
Список множественного выбораРаскрывающийся список

Атрибуты тега <select>

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

multiple

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

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

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

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

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

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Список</title>
 </head>
 <body>
  <form>
   <p><select name="select" size="3" multiple>
    <option selected value="s1">Чебурашка</option>
    <option value="s2">Крокодил Гена</option>
    <option value="s3">Шапокляк</option>
    <option value="s4">Крыса Лариса</option>
   </select>
   <input type="submit" value="Отправить"></p> 
  </form>
 </body>
</html>

name

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

size

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

Атрибуты тега <OPTION>

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

selected

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

value

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

label

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

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

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

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Список</title>
 </head>
 <body>
  <form>
   <p><strong>Выбери персонажа</strong></p>
   <p><select name="hero">
    <option value="s1">Чебурашка</option>
    <option value="s2" selected>Крокодил Гена</option>
    <option value="s3">Шапокляк</option>
    <option value="s3" label="Лариса">Крыса Лариса</option>
   </select> 
   <input type="submit" value="Отправить"></p>
  </form> 
 </body>
</html>

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

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

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

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Список</title>
 </head>
 <body>
  <form>
   <p><select name="food">
    <optgroup label="Русская кухня">
     <option value="r1">Закуска Барская</option>
     <option value="r2">Раки, фаршированные по-царски</option>
     <option value="r3">Биточки в горшочке</option>
    </optgroup>
    <optgroup label="Украинская кухня">
     <option value="u1">Галушки славянские</option>
     <option value="u2">Пампушки украинские</option>
     <option value="u3">Жаркое по-харьковски</option>
    </optgroup>
   </select></p>
   <p><input type="submit" value="Отправить"></p>
  </form>
 </body>
</html>

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

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

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

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

С помощью атрибута multiple можно создать список с выбором нескольких значений (список с множественным выбором).

Пункты выпадающего списка определяются с помощью тега <option>. Тег <optgroup> определяет группы пунктов внутри выпадающего списка HTML.

Выпадающий список в HTML является одним из элементов форм. Подробно о создании форм описано в статье: Все про формы и поля в HTML. Создание и работа с формами.

При отправке формы, на сервер будет отправлена переменная, в качестве названия имеющая имя списка select (значение атрибута name), содержащая значение выбранного пункта списка. Если в выбранном пункте списка <option> есть атрибут value, то значением считается его содержимое, в противном случае значением считается содержимое тега <option>.

Синтаксис

<select>элементы списка</select>

Примеры использования выпадающего списка <select> в HTML коде

Ниже представлены 4 основных варианта выпадающих списков HTML.

Простой HTML выпадающий список

СинийЗеленыйЖелтыйКрасныйОранжевыйЧерный

HTML код простого выпадающего списка

<select name="user_profile_color_1">
<option value="1">Синий</option>
 
<option value="2">Зеленый</option>
<option value="3">Желтый</option>
<option value="4">Красный</option>
<option value="5">Оранжевый</option>
<option value="6">Черный</option>
</select>

Выпадающий список с выбором нескольких значений

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

Атрибут name такого списка должен заканчиваться символами «[]», например, name=»cars[]».

NissanToyotaBMWWolksvagenSkodaMercedes-Benz

HTML код выпадающего списка с выбором нескольких значений

<select name="user_cars[]" multiple="multiple" size="4">
<option value="1">Nissan</option>
<option value="2">Toyota</option>
<option value="3">BMW</option>
<option value="4">Wolksvagen</option>
<option value="5">Skoda</option>
<option value="6">Mercedes-Benz</option>
</select>

Раскрывающийся список с группами пунктов

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

МоскваСанкт-ПетербургНовосибирскКиевХарьковЛьвовМинскБобруйскГомель

HTML код раскрывающегося списка с группами пунктов

<select name="user_city">
<optgroup label="Россия">
<option value="1">Москва</option>
<option value="2">Санкт-Петербург</option>
<option value="3">Новосибирск</option>
</optgroup>
<optgroup label="Украина">
<option value="4">Киев</option>
<option value="5">Харьков</option>
<option value="6">Львов</option>
</optgroup>
<optgroup label="Беларусь">
<option value="7">Минск</option>
<option value="8">Бобруйск</option>
<option value="9">Гомель</option>
 
</optgroup>
</select>

HTML список обязательный для заполнения (выбора)

Для того, чтобы создать список select, обязательный для заполнения (<select> список, где пользователь должен обязательно выбрать значение) нужно использовать атрибут required, а также добавить внутрь списка первым пунктом <option> с пустым значением атрибута value.

Выберите значениеСинийЗеленыйЖелтыйКрасныйОранжевыйЧерный

HTML код выпадающего списка обязательного для выбора (заполнения)

<select name="user_profile_color_2" required="required">
<option value="">Выберите значение</option>
<option value="1">Синий</option>
<option value="2">Зеленый</option>
 
<option value="3">Желтый</option>
<option value="4">Красный</option>
<option value="5">Оранжевый</option>
<option value="6">Черный</option>
</select>

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

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

Атрибут Значения Описание
autofocus не указывается / autofocus

Логический атрибут. Если указан, при загрузке документа фокус будет переведен на список.
disabled не указывается / disabled

Логический атрибут. Если указан, делает список неактивным.

Данные списка, отмеченного этим атрибутом, не будут переданы на сервер при отправке формы. Атрибут также отключает возможность изменения состояния списка пользователем (например, изменение выбранного пункта).
form id формы

Указывает на форму, к которой относится список. Используется, если список <select> находится вне HTML кода формы.

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

Логический атрибут. Открывает возможность множественного выбора. Если указан, вместо выпадающего списка будет выведен список с возможностью выбрать несколько значений (пунктов) одновременно. Количество элементов, доступных без скроллинга регулируется атрибутом size.
name текст

Имя списка. Используется при передаче данных формы на сервер. Значение списка будет передано в переменной, имеющей имя, указанное в этом атрибуте.
required не указывается / required

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

Заполнение контролируется браузером. При попытке отправить форму с незаполненным обязательным списком браузеры обычно выводят на экран ошибку заполнения.
size число

Количество пунктов списка, одновременно выводимых на экран. Для выпадающего списка используется значение 1. Это значение по умолчанию.

Если значение больше чем 1, вместо выпадающего списка будет выведен список со скроллингом.

Тег <select> также поддерживает глобальные HTML атрибуты.

Создаем стильные выпадающие списки

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

Обратите внимание на некоторые вещи, прежде чем мы начнем:

  • В примерах кода пропущены префиксы браузеров для CSS-свойств, но вы, конечно, можете найти их в исходных файлах.
  • Лично я использую бокс-модель, где [width] = [element-width] + [padding] + [borders]. Чтобы её активировать, необходим следующий фрагмент кода:

*,
*:after,
*:before {
    box-sizing: border-box;
}

Итак, с чего же мы начнем.

Первый вопрос: что нам нужно для создания выпадающего меню? В общем, мы будем использовать блок DIV с вложенным тегом span и неупорядоченный список для выпадающего меню:

<div>
    <span>I’m kinda the label!</span>
    <ul>
        <li>I’m hidden!</li>
        <li>Me too!</li>
        <li>So do I.</li>
    </ul>
</div>

JavaScript

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

//…
 
obj.dd.on(‘click’, function(event){
    $(this).toggleClass(‘active’);
    return false;
});
 
//…
 
$(function() {
 
    var dd = new DropDown( $(‘#dd’) );
 
    $(document).click(function() {
        // all dropdowns
        $(‘.wrapper-dropdown-1’).removeClass(‘active’);
    });
 
});

Так что же это скрипт делает? Во-первых, он переключает класс .active, когда вы кликаете на враппер. Это означает, что если враппер не имеет класс .active, то он добавляется, а если этот класс уже присвоен, то он удаляется.

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

Что ж, теперь мы понимаем, как это работает, я думаю, пришло время для создания примеров!

Пример 1

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

HTML-разметка

Нам нужно несколько вещей: обертка (div с id#dd), (скрытый) раскрывающийся список и «лейбл», который будет обернут тегом span. Мы используем ссылки-якоря, потому что мне кажется так будет семантически правильно, но вы можете также использовать другой тег.

<div tabindex=»1″>
    <span>Пол</span>
    <ul>
        <li><a href=»#»>Мужской</a></li>
        <li><a href=»#»>Женский</a></li>
    </ul>
</div>

CSS

Давайте теперь перейдем к CSS. Начнем с обертки (враппера):

.wrapper-dropdown {
    /* размер и положение */
    position: relative; /* Enable absolute positioning for children and pseudo elements */
    width: 200px;
    padding: 10px;
    margin: 0 auto;
 
    /* цвет и фон */
    background: #9bc7de;
    color: #fff;
    outline: none;
    cursor: pointer;
 
    /* шрифт */
    font-weight: bold;
}

Итак, мы сделали несколько вещей. Сначала мы установили ширину списка и некоторые отступы. Далее, мы задали ему цвет и фон. И, наконец, мы установили параметры для шрифта.

Давайте закончим с «лейблом», добавив небольшую стрелку справа при помощи псевдо-элемента.

.wrapper-dropdown:after {
    content: «»;
    width: 0;
    height: 0;
    position: absolute;
    right: 16px;
    top: 50%;
    margin-top: -6px;
    border-width: 6px 0 6px 6px;
    border-style: solid;
    border-color: transparent #fff;  
}

Я думаю, мы все знаем, как создать маленький треугольник на CSS при помощи бордера (границы). Это конечно хак, но если он работает очень хорошо, так почему бы и нет? Там нет ничего особенного: маленькая белая стрелка справа.

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

.wrapper-dropdown-1 .dropdown {
    /* Size &amp; position */
    position: absolute;
    top: 100%;
    left: 0; /* Size */
    right: 0; /* Size */
 
    /* Styles */
    background: #fff;
    font-weight: normal; /* Overwrites previous font-weight: bold; */
 
    /* Hiding */
    opacity: 0;
    pointer-events: none;
}

Мы зададим раскрывающемуся списку абсолютное позиционирование и разместим его позади кнопки (top: 100%;). Зададим ему такую же ширину, как для кнопки. И, наконец, скроем его, уменьшив его прозрачность до 0.

Теперь зададим стили для элементов списка:

.wrapper-dropdown-1 .dropdown li a {
    display: block;
    text-decoration: none;
    color: #9e9e9e;
    padding: 10px 20px;
}
 
/* Hover state */
.wrapper-dropdown-1 .dropdown li:hover a {
    background: #f3f8f8;
}

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

/* Active state */
.wrapper-dropdown-1.active .dropdown {
    opacity: 1;
    pointer-events: auto;
}
 
.wrapper-dropdown-1.active:after {
    border-color: #9bc7de transparent;
    border-width: 6px 6px 0 6px ;
    margin-top: -3px;
}
 
.wrapper-dropdown-1.active {
  background: #9bc7de;
  background: linear-gradient(to right, #9bc7de 0%, #9bc7de 78%, #ffffff 78%, #ffffff 100%);
}

Три вещи, которые необходимо отметить:

  1. Во-первых, мы делаем выпадающий список видимым, изменив его прозрачность до 1. 
  2. Далее, мы меняем направление и цвет маленькой стрелки.
  3. Затем мы изменим фон позади стрелки с помощью градиента.

JavaScript

Последнее, но не менее важное, мы также должны добавить еще один фрагмент JavaScript, чтобы кнопка отображала выбранное значение.

function DropDown(el) {
    this.dd = el;
    this.placeholder = this.dd.children(‘span’);
    this.opts = this.dd.find(‘ul.dropdown > li’);
    this.val = »;
    this.index = -1;
    this.initEvents();
}
DropDown.prototype = {
    initEvents : function() {
        var obj = this;
 
        obj.dd.on(‘click’, function(event){
            $(this).toggleClass(‘active’);
            return false;
        });
 
        obj.opts.on(‘click’,function(){
            var opt = $(this);
            obj.val = opt.text();
            obj.index = opt.index();
            obj.placeholder.text(‘Gender: ‘ + obj.val);
        });
    },
    getValue : function() {
        return this.val;
    },
    getIndex : function() {
        return this.index;
    }
}

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

Пример 2

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

HTML-разметка

<div>Регистрация
    <ul>
        <li><a href=»#»><i></i>Twitter</a></li>
        <li><a href=»#»><i></i>Github</a></li>
        <li><a href=»#»><i></i>Facebook</a></li>
    </ul>
</div>

Теги <i> используются для отображения маленьких иконок из FontAwesome. Я не буду объяснять что такое FontAwesome здесь, потому как об этом уже было не раз сказано в предыдущих статьях. Просто убедитесь, что это работает.

CSS

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

.wrapper-dropdown-2 {
    /* Size and position */
    position: relative; /* Enable absolute positioning for children and pseudo elements */
    width: 200px;
    margin: 0 auto;
    padding: 10px 15px;
 
    /* Styles */
    background: #fff;
    border-left: 5px solid grey;
    cursor: pointer;
    outline: none;
}

Теперь маленькая стрелка. Точно такая же, как раньше:

.wrapper-dropdown-2:after {
    content: «»;
    width: 0;
    height: 0;
    position: absolute;
    right: 16px;
    top: 50%;
    margin-top: -3px;
    border-width: 6px 6px 0 6px;
    border-style: solid;
    border-color: grey transparent;
}

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

.wrapper-dropdown-2 .dropdown {
  /* Size &amp; position */
    position: absolute;
    top: 100%;
    left: -5px;
    right: 0px;
 
    /* Styles */
    background: white;
    transition: all 0.3s ease-out;
    list-style: none;
 
    /* Hiding */
    opacity: 0;
    pointer-events: none;
}

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

Некоторые стили для ссылок и иконок:

.wrapper-dropdown-2 .dropdown li a {
    display: block;
    text-decoration: none;
    color: #333;
    border-left: 5px solid;
    padding: 10px;
    transition: all 0.3s ease-out;
}
 
.wrapper-dropdown-2 .dropdown li:nth-child(1) a {
    border-left-color: #00ACED;
}
 
.wrapper-dropdown-2 .dropdown li:nth-child(2) a {
    border-left-color: #4183C4;
}
 
.wrapper-dropdown-2 .dropdown li:nth-child(3) a {
    border-left-color: #3B5998;
}
 
.wrapper-dropdown-2 .dropdown li i {
    margin-right: 5px;
    color: inherit;
    vertical-align: middle;
}
 
/* Hover state */
 
.wrapper-dropdown-2 .dropdown li:hover a {
    color: grey;
}

И теперь, займемся стилями списка в раскрытом состоянии. Изменим направление стрелки, а раскрывающийся список станет видимым.

.wrapper-dropdown-2.active:after {
    border-width: 0 6px 6px 6px;
}
 
.wrapper-dropdown-2.active .dropdown {
    opacity: 1;
    pointer-events: auto;
}

JavaScript

function DropDown(el) {
    this.dd = el;
    this.initEvents();
}
DropDown.prototype = {
    initEvents : function() {
        var obj = this;
 
        obj.dd.on(‘click’, function(event){
            $(this).toggleClass(‘active’);
            event.stopPropagation();
        });
    }
}

Пример 3

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

HTML-разметка

<div tabindex=»1″>
    <span>Транспорт</span>
    <ul>
        <li><a href=»#»><i></i>Почта</a></li>
        <li><a href=»#»><i></i>UPS доставка</a></li>
        <li><a href=»#»><i></i>Частный самолет</a></li>
    </ul>
</div>

Кода не намного больше, чем раньше. Перейдем к CSS!

CSS

.wrapper-dropdown-3 {
    /* Size and position */
    position: relative;
    width: 200px;
    margin: 0 auto;
    padding: 10px;
 
    /* Styles */
    background: #fff;
    border-radius: 7px;
    border: 1px solid rgba(0,0,0,0.15);
    box-shadow: 0 1px 1px rgba(50,50,50,0.1);
    cursor: pointer;
    outline: none;
 
    /* Font settings */
    font-weight: bold;
    color: #8AA8BD;
}

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

.wrapper-dropdown-3:after {
    content: «»;
    width: 0;
    height: 0;
    position: absolute;
    right: 15px;
    top: 50%;
    margin-top: -3px;
    border-width: 6px 6px 0 6px;
    border-style: solid;
    border-color: #8aa8bd transparent;
}

Тут все также, как и раньше, так что не будем описывать код подробно.

.wrapper-dropdown-3 .dropdown {
  /* Size &amp; position */
    position: absolute;
    top: 140%;
    left: 0;
    right: 0;
 
    /* Styles */
    background: white;
    border-radius: inherit;
    border: 1px solid rgba(0,0,0,0.17);
    box-shadow: 0 0 5px rgba(0,0,0,0.1);
    font-weight: normal;
    transition: all 0.5s ease-in;
    list-style: none;
 
    /* Hiding */
    opacity: 0;
    pointer-events: none;
}
 
.wrapper-dropdown-3 .dropdown li a {
    display: block;
    padding: 10px;
    text-decoration: none;
    color: #8aa8bd;
    border-bottom: 1px solid #e6e8ea;
    box-shadow: inset 0 1px 0 rgba(255,255,255,1);
    transition: all 0.3s ease-out;
}
 
.wrapper-dropdown-3 .dropdown li i {
    float: right;
    color: inherit;
}
 
.wrapper-dropdown-3 .dropdown li:first-of-type a {
    border-radius: 7px 7px 0 0;
}
 
.wrapper-dropdown-3 .dropdown li:last-of-type a {
    border-radius: 0 0 7px 7px;
    border: none;
}
 
/* Hover state */
 
.wrapper-dropdown-3 .dropdown li:hover a {
    background: #f3f8f8;
}

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

.wrapper-dropdown-3 .dropdown:after {
    content: «»;
    width: 0;
    height: 0;
    position: absolute;
    bottom: 100%;
    right: 15px;
    border-width: 0 6px 6px 6px;
    border-style: solid;
    border-color: #fff transparent;  
}
 
.wrapper-dropdown-3 .dropdown:before {
    content: «»;
    width: 0;
    height: 0;
    position: absolute;
    bottom: 100%;
    right: 13px;
    border-width: 0 8px 8px 8px;
    border-style: solid;
    border-color: rgba(0,0,0,0.1) transparent;  
}

Мы использовали два псевдо-элемента для этой стрелки, так как мы хотим создать границу вокруг неё.

Теперь стили для раскрытого состояния. Все одно и то же. Тем не менее, обратите внимание, что мы установили переход к .dropdown немного дольше, чем обычно (0,5 вместо 0,3 с). Таким образом, открытие меню будет очень гладким.

.wrapper-dropdown-3.active .dropdown {
    opacity: 1;
    pointer-events: auto;
}

JavaScript

Чтобы закончить этот демо-пример, мы должны добавить немного JavaScript, чтобы заменить значение выбранной кнопки по умолчанию. Мы видели, как это делается в первом примере, но, поскольку мы не оставляем слово «Транспорт» здесь, то JS немного отличается.

function DropDown(el) {
    this.dd = el;
    this.placeholder = this.dd.children(‘span’);
    this.opts = this.dd.find(‘ul.dropdown > li’);
    this.val = »;
    this.index = -1;
    this.initEvents();
}
DropDown.prototype = {
    initEvents : function() {
        var obj = this;
 
        obj.dd.on(‘click’, function(event){
            $(this).toggleClass(‘active’);
            return false;
        });
 
        obj.opts.on(‘click’,function(){
            var opt = $(this);
            obj.val = opt.text();
            obj.index = opt.index();
            obj.placeholder.text(obj.val);
        });
    },
    getValue : function() {
        return this.val;
    },
    getIndex : function() {
        return this.index;
    }
}

Пример 4

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

HTML-разметка

<div>Сделать
    <ul>
        <li><input type=»checkbox» name=»el-1″ value=»donut»><label for=»el-1″>Съесть пирожок</label></li>
        <li><input type=»checkbox» name=»el-2″ value=»neighbour»><label for=»el-2″>Следить за соседями</label></li>
        <li><input type=»checkbox» name=»el-3″ value=»T-rex»><label for=»el-3″>Покормить кота</label></li>
    </ul>
</div>

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

CSS

.wrapper-dropdown-4 {
    /* Size and position */
    position: relative;
    width: 270px;
    margin: 0 auto;
    padding: 10px 10px 10px 30px;
 
    /* Styles */
    background: #fff;
    border: 1px solid silver;
    cursor: pointer;
    outline: none;
}

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

.wrapper-dropdown-4:after {
    content: «»;
    width: 0;
    height: 0;
    position: absolute;
    right: 10px;
    top: 50%;
    margin-top: -3px;
    border-width: 6px 6px 0 6px;
    border-style: solid;
    border-color: #ffaa9f transparent;
}

Стили для выпадающего списка такие же, как и в предыдущих примерах:

.wrapper-dropdown-4 .dropdown {
    /* Size &amp; position */
    position: absolute;
    top: 100%;
    margin-top: 1px; /* border of wrapper */
    left: -1px;
    right: -1px;
 
    /* Styles */
    background: white;
    border: 1px solid silver;
    border-top: none;
    list-style: none;
    transition: all 0.3s ease-out;
   
    /* Hiding */
    opacity: 0;
    pointer-events: none;
}

Мы должны установить margin-top равный 1px, потому что мы должны немного сдвинуть его вниз из-за границы обертки.

.wrapper-dropdown-4 .dropdown li {
    position: relative; /* Enable absolute positioning for checkboxes */
}
 
.wrapper-dropdown-4 .dropdown li label {
    display: block;
    padding: 10px 10px 10px 30px; /* Same padding as the button */
    border-bottom: 1px dotted #1ccfcf;
    transition: all 0.3s ease-out;
}
 
.wrapper-dropdown-4 .dropdown li:last-of-type label {
    border: none;
}
 
.wrapper-dropdown-4 .dropdown li input /* Checkboxes */ {
    position: absolute;
    display: block;
    right: 10px;
    top: 50%;
    margin-top: -8px;
}
 
/* Hover state */
 
.wrapper-dropdown-4 .dropdown li:hover label {
    background: #f0f0f0;
}
 
/* Checked state */
 
.wrapper-dropdown-4 .dropdown li input:checked ~ label {
    color: grey;
    text-decoration: line-through;
}

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

Когда флажок установлен, текст становится серым и перечеркнутым. Просто, но эффективно.

У нас есть еще две тонкие красные линии слева в нашей маленькой записной книжке. Есть два способа сделать это: один с псевдо-элементами и один с градиентами. Давайте посмотрим на оба варианта.

/* красные линии с псевдо-элементами */
.wrapper-dropdown-4 .dropdown:before,
.wrapper-dropdown-4:before {
    content: «»;
    width: 4px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 15px;
    border: 1px solid #ffaa9f;
    border-top: none;
    border-bottom: none;
    z-index: 2;
}
 
/* Или: */
/* красные линии при помощи градиента */
 
.wrapper-dropdown-4 .dropdown,
.wrapper-dropdown-4 {
  background: linear-gradient(left, white 5%, #ffaa9f 5%, #ffaa9f 5.3%, white 5.3%, white 6.5%, #ffaa9f 6.5%, #ffaa9f 6.8%, white 6.8%);
}
 
.wrapper-dropdown-4 .dropdown li:hover label {
  background: linear-gradient(left, #f0F0F0 5%, #ffaa9f 5%, #ffaa9f 5.3%, #f0F0F0 5.3%, #f0F0F0 6.5%, #ffaa9f 6.5%, #ffaa9f 6.8%, #f0F0F0 6.8%);
}

Так какой из этих способов лучше? Вероятно, первый, потому что, если вы хотите изменить эффект при наведении на элементы списка, вы должны изменить градиент, что довольно непросто. Кроме того, псевдо-элементы лучше поддерживаются браузерами (начиная с IE8), в отличии от градиентов (не поддерживаются до IE10).

Теперь стили для раскрытого состояния. Ничего нового здесь нет.

/* Active state */
 
.wrapper-dropdown-4.active:after {
    border-width: 0 6px 6px 6px;
}
 
.wrapper-dropdown-4.active .dropdown {
    opacity: 1;
    pointer-events: auto;
}

JavaScript

function DropDown(el) {
    this.dd = el;
    this.opts = this.dd.find(‘ul.dropdown > li’);
    this.val = [];
    this.index = [];
    this.initEvents();
}
DropDown.prototype = {
    initEvents : function() {
        var obj = this;
 
        obj.dd.on(‘click’, function(event){
            $(this).toggleClass(‘active’);
            event.stopPropagation();
        });
 
        obj.opts.children(‘label’).on(‘click’,function(event){
            var opt = $(this).parent(),
                chbox = opt.children(‘input’),
                val = chbox.val(),
                idx = opt.index();
 
            ($.inArray(val, obj.val) !== -1) ? obj.val.splice( $.inArray(val, obj.val), 1 ) : obj.val.push( val );
            ($.inArray(idx, obj.index) !== -1) ? obj.index.splice( $.inArray(idx, obj.index), 1 ) : obj.index.push( idx );
        });
    },
    getValue : function() {
        return this.val;
    },
    getIndex : function() {
        return this.index;
    }
}

Пример 5

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

HTML-разметка

<div tabindex=»1″>Иван Иванов
    <ul>
        <li><a href=»#»><i></i>Профиль</a></li>
        <li><a href=»#»><i></i>Настройки</a></li>
        <li><a href=»#»><i></i>Выйти</a></li>
    </ul>
</div>

CSS

.wrapper-dropdown-5 {
    /* Size &amp; position */
    position: relative;
    width: 200px;
    margin: 0 auto;
    padding: 12px 15px;
 
    /* Styles */
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 1px 0 rgba(0,0,0,0.2);
    cursor: pointer;
    outline: none;
    transition: all 0.3s ease-out;
}
 
.wrapper-dropdown-5:after { /* Little arrow */
    content: «»;
    width: 0;
    height: 0;
    position: absolute;
    top: 50%;
    right: 15px;
    margin-top: -3px;
    border-width: 6px 6px 0 6px;
    border-style: solid;
    border-color: #4cbeff transparent;
}

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

.wrapper-dropdown-5 .dropdown {
    /* Size &amp; position */
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
 
    /* Styles */
    background: #fff;
    border-radius: 0 0 5px 5px;
    border: 1px solid rgba(0,0,0,0.2);
    border-top: none;
    border-bottom: none;
    list-style: none;
    transition: all 0.3s ease-out;
 
    /* Hiding */
    max-height: 0;
    overflow: hidden;
}

На этот раз мы не изменяли непрозрачность до 0, чтобы скрыть меню. Мы установили max-height равную 0 и overflow: hidden. Почему установили max-height, а не height? Потому что мы не знаем точную высоту раскрытого списка.

Простые стили для элементов списка.

.wrapper-dropdown-5 .dropdown li {
    padding: 0 10px ;
}
 
.wrapper-dropdown-5 .dropdown li a {
    display: block;
    text-decoration: none;
    color: #333;
    padding: 10px 0;
    transition: all 0.3s ease-out;
    border-bottom: 1px solid #e6e8ea;
}
 
.wrapper-dropdown-5 .dropdown li:last-of-type a {
    border: none;
}
 
.wrapper-dropdown-5 .dropdown li i {
    margin-right: 5px;
    color: inherit;
    vertical-align: middle;
}
 
/* Hover state */
 
.wrapper-dropdown-5 .dropdown li:hover a {
    color: #57a9d9;
}

А теперь, в активном состоянии:

/* Active state */
 
.wrapper-dropdown-5.active {
    border-radius: 5px 5px 0 0;
    background: #4cbeff;
    box-shadow: none;
    border-bottom: none;
    color: white;
}
 
.wrapper-dropdown-5.active:after {
    border-color: #82d1ff transparent;
}
 
.wrapper-dropdown-5.active .dropdown {
    border-bottom: 1px solid rgba(0,0,0,0.2);
    max-height: 400px;
}

Когда выпадающий список открыт, мы меняем нижние углы кнопки, ее цвет, направление стрелки и цвет стрелки и удаляем её тень и границы.
И, чтобы показать меню, мы устанавливаем max-height выпадающего списка равную 400 пикселей. Мы могли бы установить её равную 500px или 1000px, это не имеет значения.

JavaScript

function DropDown(el) {
    this.dd = el;
    this.initEvents();
}
DropDown.prototype = {
    initEvents : function() {
        var obj = this;
 
        obj.dd.on(‘click’, function(event){
            $(this).toggleClass(‘active’);
            event.stopPropagation();
        });
    }
}

Обратная совместимость

Итак, теперь у нас есть 5 раскрывающихся списков, которые замечательно работают, но как насчет старых браузеров?
Эти браузеры не понимают, например, свойство opacity.

В этом нам поможет библиотека Modernizr. Грубо говоря, для тех, кто не знает, Modernizr это библиотека JavaScript, которая обнаруживает поддерживаемые HTML5 и CSS3 свойства в браузер пользователя.

Благодаря этому, мы можем «указать» браузеру, если вы не поддерживаете *это* свойство, то делайте следующее. Ниже приведен пример того, как мы можем управлять стилями для браузеров, которые не поддерживают определенные свойства CSS:

/* Нет поддержки CSS3 */
 
.no-opacity       .wrapper-dropdown-1 .dropdown,
.no-pointerevents .wrapper-dropdown-1 .dropdown {
    display: none;
    opacity: 1; /* If opacity support but no pointer-events support */
    pointer-events: auto; /* If pointer-events support but no pointer-events support */
}
 
.no-opacity       .wrapper-dropdown-1.active .dropdown,
.no-pointerevents .wrapper-dropdown-1.active .dropdown {
    display: block;
}

Если браузер не поддерживает opacity или pointer-events, то используется свойство display: block;. Ну и так далее.

Заключение.

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

Демонстрация

Скачать исходные файлы

Перевод статьи с tympanus.net/codrops


Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом

Выпадающий список в HTML — Тег в HTML и теги и .

В прошлый раз мы очень подробно обсудили атрибуты тега <input> и особенно подробно атрибут type и его возможности.

Теперь мы познакомимся с еще тремя HTML-тегами предназначенными для форм. Это теги <select>, <option> и <optgroup>. C помощью этих тегов мы сможем сделать выпадающий список в HTML-форме и сделать его структуру удобной для использования. Естественно кроме изучения самих тегов мы поговорим и об их HTML-атрибутах. С какими-то из них мы уже знакомы, а с какими-то еще нет.

Тег <select> в HTML.

Основной тег, который необходим для создания выпадающего списка это тег <select>. Именно с него мы и начнем.

Это парный тег после добавления, которого в HTML документ появится раскрывающийся список. Но при использовании только тега <select> самих пунктов для выбора не появится. А если нет пунктов, значит и нечего выбрать. Чтобы добавить пункты списка необходимо использовать тег <option>, о котором мы поговорим чуть ниже.

Для начала рассмотрим синтаксис тега <select>. Добавляется он внутрь элемента <form>, это следует учитывать.

Таким образом, может выглядеть самый простой вариант HTML-кода для вывода HTML-тега <select>.
Тег <option> в HTML.
Как я упоминал чуть выше, этот тег существует для добавления пунктов списка в выпадающий список, выводимый с помощью тега <select>. Этот тег чем-то по предназначению напоминает тег <li> для создания элементов HTML-списка.
Синтаксис тега <option> в HTML не представляет ничего особенного и в самом простом варианте его можно использовать так:
Пункт списка
То есть из сказанного выше становится понятно, что мы должны использовать два HTML-тега для создания выпадающего списка это тег <select> и тег <option>.
Тег <optgroup> в HTML.
Но для выпадающих списков существует еще один тег, который может помочь сделать список более удобным за счет того, что он предназначен для группировки пунктов списка. Это тег <optgroup>.
Также стоит отметить, что у данного элемента существует обязательный атрибут label, который мы должны использовать всегда. Этот атрибут отвечает за текст, который будет отмечать ту или иную группу списка.
Синтаксис также прост, но стоит учитывать, что внутри тега <optgroup> должен присутствовать тег <option>.
Второй пунктТретий пункт


Если же говорить о полном коде выпадающего списка, то он может выглядеть примерно так:
Первый пунктВторой пунктТретий пункт
Все довольно просто и прозрачно. В видео уроке мы подробно обсудим все эти теги и их атрибуты и рассмотрим, как это все работает на практике.
Видео урок: Выпадающий список в HTML — Тег <select> в HTML и теги <option> и <optgroup>.
HTML-справочник и другие материалы можно и нужно скачать здесь!
В следующем видео уроке мы познакомимся с двумя HTML-тегами. Один из них позволит добавить поле ввода многострочного текста, а с помощью другого мы познакомимся с еще одним способом добавления кнопок в HTML-форму.
Сортировка выпадающего списка
 Сортировка выпадающего списка
Intended audience: 
 XHTML/HTML coders (using editors or scripting), script developers (PHP, JSP, etc.).
В качестве элемента формы, у меня есть выпадающий список элементов. Почему они не сортируются когда я перевожу элементы в списке?
 Несмотря на то, что множество языков программирования имеют выпадающие списки элементов с возможностью сортировки элементов перед выводом на экран, HTML элемент
 <select> лишен подобного свойства. Он выводит элементы
 <options> в том порядке, в котором они указаны в коде. Соответственно, для вывода в нужном порядке их нужно отсортировать вручную или использовать различные вспомогательные инструменты разработчиков (например через XSLT преобразования).
Например, у нас имеется выпадающий список, состоящий из названий домашних животных.
 В списке содержатся следующие элементы в алфавитном порядке:
<form .....>
    <select size="1" name="pet">
       <option value='cat'>cat</option>
       <option value='dog'>dog</option>
       <option value='mouse'>mouse</option>
    </select>
...
...
</form>
Когда список оказывается переведенным на голандский язык, в нем присутствуют следующие элементы:
<form .....>
    <select size="1" name="pet">
       <option value='cat'>kat</option>
       <option value='dog'>hond</option>
       <option value='mouse'>muis</option>
    </select>
...
...
</form>
Для того чтобы соответствовать правилам сортировки по алфавиту на голаднском, мы должны переставить элементы списка следующим образом:
<form .....>
    <select size="1" name="pet">
       <option value='dog'>hond</option>
       <option value='cat'>kat</option>
       <option value='mouse'>muis</option>
    </select>
...
...
</form>

Подобная операция производится для каждого отображаемого языка.
Заметьте, что атрибуты value не переводятся. Разделение материала отображаемого пользователю и данных, обрабатываемых на серверной стороне, позволяет разработчикам сохранять неизменной серверную часть. Это обозначает, что они не должны менять обработку значений, которые они получают от пользователя каждый раз, когда добавляется новый язык.
Как создать выпадающий список Select на HTML —
В HTML формах предусмотрено множество элементов. Поля ввода текста, радиокнопки, чекбоксы, поля выбора даты. Все эти элементы дают возможность пользователю вводить какую-то информацию. Но на этом типы полей форм не заканчиваются. Далее в этой статье речь пойдет о выпадающих списках.
Сам выпадающий список select в большинстве создается внутри формы form. Но для отдельных случаев можно разместить список вне ее, указав ему значение атрибута form, равным идентификатору формы.
Выпадающий список обязательно должен содержать перечень позиций, доступных для выбора. По умолчанию, пользователь может выбрать лишь одну позицию из предложенных. Для случая, кода потребуется выбор не одной, а нескольких позиций, списку нужно добавить атрибут multiple.
Чтобы на стороне сервера php-сценарий смог однозначно идентифицировать выпадающий список, ему указывается атрибут name с произвольным значением. По этому значению (имени списка) и будет происходить идентификация списка серверным скриптом.
Сами же позиции обозначаются тэгом option. Это парный тэг, поэтому его закрытие необходимо. Между открывающим и завершающим тэгом следует указать наименование позиции. Это наименование и будет фигурировать на экране, когда пользователь загрузит веб-страницу. Однако, при отправке формы, на сервер отправится не содержимое элемента option, а значение, указанное в атрибуте value этого элемента.
Чтобы при загрузке страницы по умолчанию выбирался какой-то из пунктов списка, ему нужно назначить атрибут selected. А для блокировки возможности выбора позиции списка используется атрибут disabled.
Стоит отдельно отметить возможность группировки позиций внутри списка. Для этого элементы option обертываются в тэг 
. Этот тэг группирует элементы списка в группу, имя которой задается атрибутом label.
Количество позиций внутри списка не ограничено, однако излишне длинный список может вызывать возникновение полосы прокрутки.
Напоследок приведем пример верстки select-списка:
<form action=”path/to/server/script.php” method=”POST”>
	<select name=”city”>
		<optgroup label="Первая группа">
			<option value=”Moscow”>Москва</option>
			<option value=”Novosibirsk”>Новосибирск</option>
		</optgroup>
		<option value=”Omsk”>Омск</option>
	</select>
</form>
Порой, использование выпадающего списка – самое удачное решение. При загрузке страницы этот элемент занимает всего одну строку, однако при раскрытии, вся заключенная в нем информация открывается взору пользователя.
В интернет-магазинах, в большинстве форм регистрации, списки являются незаменимым элементом формы!
 Пока нет оценок, но вы можете быть первым!
Список — HTML
В различных формах пользователю часто приходится выбирать один из множества вариантов. Это могут быть категории, по которым мы хотим произвести поиск, выбор различных опций для поиска. Наиболее распространённым решением является использование выпадающих списков:
В какой категории искать?
Для создания такого выпадающего списка используется тег <select> с вложенными внутри него тегами <option>. Всё это похоже на создание обычных списков, где вместо ul/ol используется <select>, а вместо li используется <option>. Также часто первый пункт списка используется для заголовка всего выпадающего списка. В таком случае для него используют атрибут disabled, чтобы заблокировать его для выбора.
<form>
    <select>
        <option disabled>Какой курс вы хотите пройти?</option>
        <option>JS</option>
        <option>PHP</option>
        <option>Java</option>
        <option>Racket</option>
        <option>HTML</option>
        <option>CSS</option>
    </select>
</form>

 Какой курс вы хотите пройти?JSPHPJavaRacketHTMLCSS
Список внутри формы также может быть представлен в виде списка, в котором можно выбрать несколько элементов. Делается это с помощью зажатия кнопки ctrl и клика мышки по полям, которые мы хотим выбрать.
В какой категории искать?
Для того, чтобы создать список с множественным выбором, у тега <select> добавляется атрибут multiple
<form>
    <select multiple>
          <option>JS</option>
          <option>PHP</option>
          <option>Java</option>
          <option>Racket</option>
          <option>HTML</option>
          <option>CSS</option>
    </select>
</form>

Задание
Создайте форму, у которой файл с обработчиком данных лежит по адресу /people. Внутри формы создайте выпадающий список из трёх элементов.
Нашли ошибку? Есть что добавить? Пулреквесты приветствуются https://github.com/hexlet-basics
 HTML-тег выбора 
 
 Пример 
 Создайте раскрывающийся список с четырьмя вариантами:
 Выбери машину:
 <выбрать
 name = "cars"> 
 
 
 
 
 
 Попробуй сам »
 Дополнительные примеры «Попробуйте сами» ниже.
 Определение и использование 
 Элемент    чаще всего используется в форме для сбора пользовательского ввода.
 Атрибут  name  необходим для ссылки
данные формы после отправки формы (если вы опустите  name , данные из раскрывающегося списка отправляться не будут).
 Атрибут  id  необходим для связи
раскрывающийся список с меткой.
 Теги
 Атрибуты событий 
 Тег   с тегами:
  
 
 Попробуй сам »
 Связанные страницы 
 Ссылка на HTML DOM: выберите объект
 Учебное пособие по CSS: стилизация форм
 Настройки CSS по умолчанию 
 Нет.
 
 
 HTML DOM Выбрать объект 
 Выбрать объект 
 Объект Select представляет элемент HTML , используя getElementById ():
  Совет:  Вы также можете получить доступ к объекту Select, выполнив поиск в коллекции элементов формы.
 Создать объект выбора 
 Вы можете создать элемент 
 
 
 Как создать раскрывающееся меню в HTML 
 В HTML мы можем легко создать раскрывающееся меню в документе Html, используя следующие различные способы:
  1.  Использование HTML-формы
  2.  Использование внутреннего CSS
 Использование HTML-формы 
 Если мы хотим создать раскрывающееся меню в документе Html с помощью формы, мы должны выполнить шаги, указанные ниже.Используя эти шаги, мы можем легко создать раскрывающееся меню:
  Шаг 1:  Во-первых, мы должны ввести код Html в любом текстовом редакторе или открыть существующий файл Html в текстовом редакторе, в котором мы хотим использовать форму для создания раскрывающегося меню.
  <Голова> <Название> Создайте выпадающее меню с помощью HTML-формы <Тело> Эта страница поможет вам понять, как создать раскрывающееся меню в HTML-документе.И этот раздел поможет вам понять, как создать раскрывающееся меню с помощью формы Html.
  Шаг 2:  Теперь мы должны поместить курсор в ту точку тега тела документа Html, где мы хотим показать раскрывающееся меню. И затем мы должны ввести тег
 в этой точке.
 <Тело> Эта страница поможет вам понять, как создать раскрывающееся меню в документе Html.
И этот раздел поможет вам понять, как создать раскрывающееся меню с помощью формы Html.<форма>
  Шаг 3:  Теперь мы должны определить теги 
  Шаг 4:  Теперь мы должны определить тег опции в соответствии с количеством значений, которые должны отображаться в раскрывающемся меню.
 <форма>  <выбор> 
  Шаг 5:  И, наконец, мы должны сохранить файл Html, а затем запустить файл.
  <Голова> <Название> Создайте выпадающее меню с помощью HTML-формы <Тело> Эта страница поможет вам понять, как создать раскрывающееся меню в HTML-документе.
И этот раздел поможет вам понять, как создать раскрывающееся меню с помощью формы Html. <форма>  <выбор> 
 Проверить это сейчас
 Вывод вышеуказанного HTML-кода показан на следующем снимке экрана:
 Использование внутреннего CSS 
 Если мы хотим создать раскрывающееся меню в документе Html с использованием таблицы стилей внутреннего каскадирования, мы должны выполнить шаги, указанные ниже.Используя эти шаги, мы можем легко создать раскрывающееся меню:
  Шаг 1:  Во-первых, мы должны ввести код Html в любом текстовом редакторе или открыть существующий файл Html в текстовом редакторе, в котором мы хотим использовать внутренний CSS для создания раскрывающегося меню.
  Шаг 2:  Теперь нам нужно поместить курсор сразу после закрытия тега title в теге заголовка   документа Html, а затем определить стили внутри тега 
  Шаг 3:  Затем мы должны использовать другой класс, который определяет раскрывающийся список.
 .падать {
 дисплей: встроенный блок;
 позиция: относительная
}
  Шаг 4:  Теперь нам нужно создать еще один класс, который используется для описания того, как появляется раскрывающееся меню.Этот класс содержит различные атрибуты, которые показаны в следующем блоке.
 .dropdown-content {
 позиция: абсолютная;
 цвет фона: светло-серый;
 минимальная ширина: 200 пикселей;
 дисплей: нет;
 z-индекс: 1;
}
  Шаг 5:  Теперь нам нужно добавить еще один класс для определения цвета и размера текста в раскрывающемся меню.
 .dropdown-content a {
 черный цвет;
 отступ: 12 пикселей 16 пикселей;
 текстовое оформление: нет;
 дисплей: блок;
}
  Шаг 6:  И, наконец, в теге стиля мы должны отредактировать поведение раскрывающегося меню при наведении курсора.Итак, мы можем легко использовать следующий код в нашем теге стиля для редактирования.
 .dropdown-content a: hover {
 цвет фона: оранжевый;
}
.dropdown: hover .dropdown-content {
 дисплей: блок;
}
.dropdown: hover .dropbtn {
 цвет фона: серый;
}
  Шаг 7:  Теперь мы должны поместить курсор в тег тела, где мы хотим показать раскрывающееся меню. Затем мы должны вставить следующий код в тег body.
 
  Шаг 8:  И, наконец, мы должны сохранить файл Html, а затем запустить файл в браузере.
  <Голова> <Название> Создайте раскрывающееся меню с помощью внутреннего CSS <стиль> .dropbtn {
 цвет фона: желтый;
 черный цвет;
 отступ: 10 пикселей;
 размер шрифта: 12 пикселей;
}
.падать {
 дисплей: встроенный блок;
 позиция: относительная
}
.dropdown-content {
 позиция: абсолютная;
 цвет фона: светло-серый;
 минимальная ширина: 200 пикселей;
 дисплей: нет;
 z-индекс: 1;
}
.dropdown-content a {
 черный цвет;
 отступ: 12 пикселей 16 пикселей;
 текстовое оформление: нет;
 дисплей: блок;
}
.dropdown-content a: hover {
 цвет фона: оранжевый;
}
.dropdown: hover .dropdown-content {
 дисплей: блок;
}
.dropdown: hover .dropbtn {
 цвет фона: серый;
}  <Тело> Эта страница поможет вам понять, как создать раскрывающееся меню в HTML-документе.
И этот раздел поможет вам понять, как создать раскрывающееся меню с помощью внутреннего CSS.
 
 Проверить это сейчас
 Вывод вышеуказанного Html-кода показан на следующем снимке экрана:
 Создайте DropDownList с помощью HtmlHelper в ASP.Чистая MVC 
 Узнайте, как сгенерировать HTML-элемент раскрывающегося списка с помощью  HtmlHelper  в режиме бритвы.
 Класс HtmlHelper включает два метода расширения для создания элемента управления    для свойства, указанного с помощью лямбда-выражения.
 Посетите docs.microsoft.com, чтобы узнать обо всех перегрузках метода DropDownListFor.
 В следующем примере создается раскрывающийся список для указанного выше свойства  StudentGender .
  @ using MyMVCApp.Models

@ модель Студент

@ Html.DropDownListFor (m => m.StudentGender,
            новый SelectList (Enum.GetValues ​​(typeof (Gender))),
            "Выберите пол")
  
    
 В приведенном выше примере первый параметр в методе  DropDownListFor ()  — это лямбда-выражение, указывающее свойство модели, которое необходимо связать с элементом select.Мы указали свойство  StudentGender . Второй параметр указывает элементы, отображаемые в раскрывающемся списке с использованием объекта  SelectList . Третий параметр является необязательным, он будет первым элементом раскрывающегося списка. Итак, теперь он генерирует элемент управления    с указанным именем, элементами списка и атрибутами html.
 Посетите docs.microsoft.com, чтобы узнать обо всех перегрузках метода DropDownList ().
  @ using MyMVCApp.Models

@ модель Студент

@ Html.DropDownList ("StudentGender",
                    новый SelectList (Enum.GetValues ​​(typeof (Gender))),
                    "Выберите пол",
                    новый {@class = "form-control"})
  
    
 В приведенном выше примере первый параметр — это имя свойства, для которого мы хотим отображать элементы списка.Второй параметр — это список значений, которые нужно включить в раскрывающийся список. Мы использовали методы Enum для получения значений  Gender .
 Третий параметр — это метка, которая будет первым элементом списка, а четвертый параметр предназначен для применения атрибутов HTML, таких как CSS, в раскрывающемся списке.
 Как создать раскрывающееся меню в HTML и CSS 
 Выпадающее меню может быть выполнено в CSS без использования сценария JavasSript. Просто добавьте несколько строк в файл CSS, и все готово.Несмотря на простоту, меню будет достаточно разнообразным. Стили подходят к произвольному номеру вложенного меню. Код остается прежним.
 В статье описаны три типа меню, но если вы только начинаете разбираться в раскладке, советую сначала прочитать ее. Это облегчит понимание.
 Во-первых, давайте сделаем разметку HTML для меню. Чтобы создать навигационное меню в HTML, мы сделаем меню списком.
  
Должно выглядеть примерно так
 Теперь HTML-часть готова. Если вы хотите добавить больше уровней / вложенного меню, самое время добавить это в код. Мы больше не будем трогать HTML-файл. Все дальнейшие изменения производятся в CSS.Первое, что нам нужно сделать, это скрыть вложенные элементы. Чтобы скрыть меню, мы будем использовать   display: none  . Чтобы удалить маркеры, используйте стиль списка  : нет  
 ul.navbar li ul {display: none;}
ul.nav li {стиль списка: none;} 
 Используйте  : hover  , чтобы вложенные элементы отображались при наведении курсора на родительский элемент. Нам нужно убедиться, что отображаются только элементы первого уровня вложенности. Для этого мы используем  >  
 ул.навигационная панель li: hover> ul {display: block;} 
 Эта строка содержит всю магию нашего раскрывающегося меню, поэтому давайте разберем ее подробнее. Благодаря псевдоклассу: hover при наведении указателя мыши на пункт меню для первого вложенного списка ul отображаемое значение станет блочным. Это открывает первый уровень вложенности. Если на этом уровне есть элементы, содержащие подпункты, и при наведении на них указателя мыши открывается только один вложенный уровень.
 С основной механикой разобрался. Осталось переопределить место, где появятся вложенные элементы.Для этого мы будем использовать свойство position: absolute. При таком позиционировании координаты отсчитываются от края окна браузера, если свойство position не установлено для родительского элемента с фиксированным, относительным или абсолютным значением. В этом случае обратный отсчет идет от края родительского элемента.
 Читайте также:
 Используя свойство position, мы переместим вложенные элементы вправо на расстояние, равное ширине меню. В рассматриваемом методе есть одно ограничение.При позиционировании мы должны жестко запрограммировать ширину. С другой стороны, вертикальное меню размещается на боковой панели с заранее определенной шириной, поэтому привязка к ширине не должна вызывать проблем.
 / * Горизонтальное раскрывающееся меню * /

тело{
  фон: # e06377;
}

/ * Меню Blcok * /
ul {
  маржа: 0;
  отступ: 0;
}
ul.navbar li {
  фон: # f9d5e5;
  граница справа: сплошная 1px #FFFFFF;
  плыть налево; / * Горизонтальные Мени * /
  высота: 30 пикселей;
  стиль списка: нет;
}
ul.navbar li a {
  текстовое оформление: нет;
  дисплей: блок;
  отступ: 5px 5px 5px 15px;
}
ул.navbar li ul {
  дисплей: нет; / * Скрыть вложенный элемент * /
}
ul.navbar {/ * установить высоту и ширину элемента * /
  фон: # f9d5e5;
  высота: 30 пикселей;
  ширина: 600 пикселей;
}

/*Выпадающее меню*/

ul.navbar li: hover {
  фон: # eeac99;
  положение: относительное;
}
ul.navbar li: hover> ul {
  border-top: сплошной белый 1px;
  дисплей: блок;
  позиция: абсолютная;
  верх: 30 пикселей; / * Уровень меню расширяется вниз * /
  слева: 0;
}
/ * Вложенное меню * /
ul.navbar li ul li {
  нижняя граница: сплошной белый 1px;
  высота: авто;
  ширина: 150 пикселей;
}
ул.navbar li: hover ul li ul {
  позиция: абсолютная;
  верх: 0;
  слева: 150 пикселей; / * Вложенное меню раскрывается справа * /
} 
 CSS Горизонтальное раскрывающееся меню (демонстрация) 
 Для горизонтального меню тоже применим позиционирование, но есть несколько нюансов. Чтобы сделать меню горизонтальным, используйте свойство float. Меню будет расширяться, поэтому при позиционировании необходимо учитывать высоту. Во-первых, давайте составим меню с одним уровнем вложенности. Подменю также будет горизонтальным. Для этого мы располагаем вложенное меню относительно списка, а не родительского элемента, и устанавливаем его ширину.
 body {
  фон: # e06377;
}

/ * Блок меню * /

ul {
  маржа: 0;
  отступ: 0;
}
ul.navbar li {
  фон: # f9d5e5;
  граница справа: сплошная 1px #FFFFFF;
  плыть налево; / * Горизонтальное меню * /
  высота: 30 пикселей;
  стиль списка: нет;
}
ul.navbar li a {
  текстовое оформление: нет;
  дисплей: блок;
  отступ: 5px 5px 5px 15px;
}
ul.navbar li ul {
  дисплей: нет; / * Скрыть вложенные элементы * /
}
ul.navbar li: hover {
  фон: # eeac99;
}
/*Выпадающее меню*/
ul.navbar {
  положение: относительное;
  фон: # f9d5e5;
  высота: 30 пикселей;
  ширина: 600 пикселей;
}
ул.navbar li: hover> ul {
  фон: # eeac99;
  border-top: сплошной белый 1px;
  дисплей: блок;
  ширина: 600 пикселей;
  позиция: абсолютная;
  верх: 30 пикселей;
  слева: 0;
} 
 новый код — HTML-формы: раскрывающиеся меню 
 Выпадающие меню используются в формах для захвата ответов, для которых существует  один правильный ответ из нескольких возможных ответов.  Хороший пример этого — запрос на провинцию, штат или страну посетителя.
 Рассмотрение альтернатив 
 При создании формы важно учитывать все возможности.Мы могли бы просто представить текстовое поле, в котором пользователь мог бы ввести название провинции, но это допускает возможность того, что он может сделать опечатку (которая становится проблемой, если эта информация вводится непосредственно в базу данных без контроля человека). Мы могли бы уменьшить размер текстового поля до двух символов и предложить пользователю просто ввести аббревиатуру провинции или штата: хотя это снижает вероятность ошибки, она не удаляется.
 Одно из лучших решений для вопроса в форме, для которой есть только один правильный ответ из большого количества возможностей, — это раскрывающееся меню.
 Раскрывающаяся разметка 
 В форме HTML это создается с помощью тега   ,  
<вариант> Альберта
 
 Сама форма не знает текста между открывающим и закрывающим тегами  option . Хотя первый вариант может быть выбран нашим пользователем, фактические данные не будут отправлены в сценарий  formhandler.php , который интерпретирует данные в форме. Мы, вероятно, ни в коем случае не хотим использовать слово «Альберта»; «AB» было бы предпочтительнее для добавления в список рассылки или базу данных.Для этого мы должны добавить  value  атрибутов к каждой из этих опций:
    
 (обратите внимание, что атрибут  value  также может использоваться для предварительной установки текста для текстового поля   ).
 Наконец, первая опция в нашем выпадающем меню будет автоматически выбрана по умолчанию. Это не всегда хорошо.Во-первых, помните о наших предположениях о нашем пользователе. Если мы что-то выбрали заранее, вполне вероятно, что он пропустит это, чтобы сэкономить время, или просто пропустит. Лучше предложить пользователю сделать выбор и сделать эту подсказку выбранной по умолчанию, если вы не можете быть абсолютно уверены, что подавляющее большинство респондентов вашей формы будет соответствовать заранее выбранным критериям.
    
 Вы найдете учебники и интерактивную справку, в которых содержится код, позволяющий выбирать несколько вариантов в раскрывающемся списке или превращающий раскрывающийся список выбора в интерфейс с прокруткой. Вообще говоря, такая практика категорически не рекомендуется.  Люди сбиваются с толку, когда их представляют, что приводит к ошибкам при вводе данных.
 Элемент  optgroup  должен использоваться для обозначения  групп  связанных опций в раскрывающемся списке; сама  optgroup  не может быть выбрана. Довольно сбивает с толку то, что  optgroup  имеет обязательный атрибут,  label , который используется для указания ссылки на группу.
 Например, чтобы показать штаты в США и провинции / территории Канады  в том же раскрывающемся списке , мы могли бы сделать следующее.
  
  
 В браузере результат будет выглядеть примерно так:
 Штат / провинция / территория — выберите один — Алабама, Калифорния… оставшиеся штаты США… Альберта, Британская Колумбия… оставшиеся провинции и территории…
 Для  выберите  меню, такое длинное и сложное, обычно рекомендуется использовать JavaScript для динамического изменения содержимое  выберите  на основе выбора пользователя ранее в форме.Например, если пользователь выберет свою страну  сначала , это должно уменьшить количество видимых опций в раскрывающемся списке «штат», чтобы отображались только соответствующие территории в их конкретной стране. Это обеспечивает более интеллектуальную и интуитивно понятную форму и лучший пользовательский интерфейс.
 Естественно, меню  

 Внешние территории США — Полное название 







 Вооруженные силы — Полное наименование 




Государственный список
 (+ район) — код ISO 
<выбор>





















































 Внешние территории США — код ISO 







 Вооруженные силы — код ISO 




Государственный список
 (+ район) — название + код ISO 
<выбор>





















































 Внешние территории США — название + код ISO 







 Вооруженные силы — название + код ISO 




.
No related posts.