Красивое оформление выпадающего списка на CSS3 и jQuery

@font-face {

    font-family: ‘icomoon’;

    src:url(‘../fonts/icomoon/icomoon.eot?-rdnm34’);

    src:url(‘../fonts/icomoon/icomoon.eot?#iefix-rdnm34′) format(’embedded-opentype’),

        url(‘../fonts/icomoon/icomoon.woff?-rdnm34’) format(‘woff’),

        url(‘../fonts/icomoon/icomoon.ttf?-rdnm34’) format(‘truetype’),

        url(‘../fonts/icomoon/icomoon.svg?-rdnm34#icomoon’) format(‘svg’);

    font-weight: normal;

    font-style: normal;

}

 

div.cs-skin-border {

    background: transparent;

    font-size: 2em;

    font-weight: 700;

    max-width: 600px;

}

 

@media screen and (max-width: 30em) {

    .cs-skin-border { font-size: 1em; }

}

 

.cs-skin-border > span {

    border: 5px solid #000;

    border-color: inherit;

    transition: background 0.2s, border-color 0.2s;

}

 

. cs-skin-border > span::after,

.cs-skin-border .cs-selected span::after {

    font-family: ‘icomoon’;

    content: ‘\e000’;

}

 

.cs-skin-border ul span::after {

    content: »;

    opacity: 0;

}

 

.cs-skin-border .cs-selected span::after {

    content: ‘\e00e’;

    color: #ddd9c9;

    font-size: 1.5em;

    opacity: 1;

    transition: opacity 0.2s;

}

 

.cs-skin-border.cs-active > span {

    background: #fff;

    border-color: #fff;

    color: #2980b9;

}

 

.cs-skin-border .cs-options {

    color: #2980b9;

    font-size: 0.75em;

    opacity: 0;

    transition: opacity 0.2s, visibility 0s 0.2s;

}

 

.cs-skin-border.cs-active .cs-options {

    opacity: 1;

    transition: opacity 0.2s;

}

 

.cs-skin-border ul span {

    padding: 1em 2em;

    backface-visibility: hidden;

}

 

. cs-skin-border .cs-options li span:hover,

.cs-skin-border li.cs-focus span {

    background: #f5f3ec;

}

Раскрывающийся список на HTML — тег SELECT — Формы — codebra

Первый раз на codebra.ru? Посмотри другие уроки по HTML и CSS!

Что такое раскрывающийся список?

Благодаря тегу <select> появилась возможность создания раскрывающего списка и списка с множественным выбором. Если вы собираетесь отправлять данные на сервер, то тег <select> должен быть помещен в форму (тег <form> ). Далее пример:

Код HTML

<form method = "POST">
<select size = "3" multiple name = "name[]">
<option disabled>Какие имена вам нравятся?</option>
<option selected value = "Никакие">Никакие</option>
<option value = "Иван">Иван</option>
<option value = "Петр">Петр</option>
<option value = "Николай">Николай</option>
</select>
<input type = "submit" value = "Ответить">
</form>

Какие есть атрибуты у тега select?

Тег <select> имеет три полезных атрибута (остальные рассматривать не будем, про них уже я говорил).

Первый атрибут multiple, благодаря нему можно сделать возможность выбора нескольких элементов списка. Чтобы выбирать несколько элементов, нужно зажать shift или ctr и наживать мышкой на нужные элементы. Далее пример применения атрибута multiple:

Код HTML

<form method = "POST">
<select size = "3" multiple name = "name[]">
<option disabled>Какие имена вам нравятся?</option>
<option selected value = "Никакие">Никакие</option>
<option value = "Иван">Иван</option>
<option value = "Петр">Петр</option>
 <option value = "Николай">Николай</option>
</select>
<input type = "submit" value = "Ответить">
</form>

Второй атрибут required, с помощью его можно «сказать» браузеру, что список должен быть выбран перед отправкой формы, иначе браузер запретит отправлять форму, и выведет вам соответствующее сообщение. Вид этого сообщения зависит полностью от браузера и пользователь не может его изменять. Далее пример применения атрибута required:

Код HTML

<form method = "POST">
<select required size = "1" name = "name[]">
 <option disabled>Да или нет?</option>
<option value = "Да">Да</option>
<option value = "Нет">Нет</option>
</select>
<input type = "submit" value = "Ответить">
</form>

Третий атрибут size, с помощью его можно указать количество отображаемых элементов списка. Атрибут size может содержать только целое число. Атрибут size трансформирует список, например, если он равен 1, то тег <select> отображается как «выпадающий список», а если атрибут size больше 1, то раскрывающийся список отображается как «список с прокруткой». Далее два примера применения атрибута

size:

Код HTML

<form method = "POST">
<select required size = "1" name = "name[]">
<option disabled>Да или нет?</option>
<option value = "Да">Да</option>
<option value = "Нет">Нет</option>
</select>
<input type = "submit" value = "Ответить">
</form>

Код HTML

<form method = "POST">
<select required size = "3" name = "name[]">
<option disabled>Да или нет?</option>
<option value = "Да">Да</option>
<option value = "Нет">Нет</option>
 </select>
<input type = "submit" value = "Ответить">
</form>

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

Приветствую вас, друзья и коллеги!

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

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

Навигация по статье:

Как сделать раскрывающийся список html

Для создания в html выпадающего списка существует тег <select>, который совместно с тегом <option>, позволяет создавать элементы интерфейса, содержащие перечень параметров в виде выпадающего списка с возможностью единичного или множественного выбора.

Перечень атрибутов для тега <select>:

autofocus – установка фокуса на элементе при загрузки страницы
disabled – отключение элемента
multiple – множественный выбор элементов раскрывающегося списка html
required – делает обязательным для заполнения
size – определяет высоту в закрытом состоянии. Задается числовым значением.
form – подключение к форме обратной связи

name – имя, для получения выбранного значения и передачи его в скрипт для обработки

Для последних трёх значение указывается в кавычках, все остальные просто дописываются к тегу <select>

Атрибуты для тега <option>:

disabled – позволят заблокировать пункт для выбора
label — дает возможность задать метку для элемента
selected – устанавливает пункт выбранным по умолчанию
value – позволяет задать значение для пункта, которое будет передано в форму для отправки или в скрипта для обработки.

Ниже я приведу несколько примеров использования атрибутов для тегов <select> и <option>

Пример самого простого раскрывающегося списка html:

Код:

<select> <option>Опция 1</option> <option>Опция 2</option> </select>

<select>   <option>Опция 1</option>   <option>Опция 2</option> </select>

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

Ширина элемента по умолчанию определяется исходя из ширины самой длинной записи. Так же ее можно изменять CSS-стилями.

HTML выпадающий список с множественным выбором

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

<select multiple> <option>Москва </option> <option>Санкт-Петербург</option> </select>

<select  multiple>   <option>Москва </option>   <option>Санкт-Петербург</option> </select>

Выбор нескольких позиций осуществляется при помощи зажатой клавиши CTRL + клик указателем мышки по нужному элементу.

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

Как задать выбранный пункт по умолчанию

В случае если вам нужно задать в html выпадающем списке опцию, которая будет отображаться по умолчанию, используем атрибут selected. Например:

<select name=»country»> <option disabled>Выберите страну</option> <option selected>Россия</option> <option >Белоруссия</option> </select>

<select name=»country»>     <option disabled>Выберите страну</option>     <option selected>Россия</option>     <option >Белоруссия</option> </select>

Обратите внимание. Если первый пункт раскрывающегося списка html задать с атрибутом disabled, то его можно использовать как подсказку или placeholder.

Как подключить раскрывающийся список html к форме

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

и form.

Атрибут name позволяет задать имя для <select>. Далее, заданное имя можно использовать в качестве переменной в скриптах.

Например:

<select name=»count» > <option value=» Москва «>Москва</option> <option value=» Казахстан «>Казахстан</option> <option value=» Белоруссия «>Белоруссия</option> </select>

<select name=»count» >     <option value=» Москва «>Москва</option>     <option value=» Казахстан «>Казахстан</option>     <option value=» Белоруссия «>Белоруссия</option> </select>

Далее, вы можете использовать полученные данные в php-функции. Например, вот так:

function dataSelect(a) { n = a.count.selectedIndex if(n) alert(«Страна: » + f.count.options[n].value) }

function dataSelect(a) {       n = a.count.selectedIndex       if(n) alert(«Страна: » + f.count.options[n].value)     }

Атрибут form дает нам возможность подключить наш раскрывающийся список html к какой-либо форме на нашем сайте, в случае если он находится вне тега <form>. В кавычках нужно указать идентификатор формы, к которой мы хотим подключить наш html выпадающий список.

Например:

<select form=»cont-form «> <option value=»2″>2х2</option> <option value=» 3 «>3х3</option> <option value=» 4 «>4х4</option> </select>

<select form=»cont-form «>     <option value=»2″>2х2</option>     <option value=» 3 «>3х3</option>     <option value=» 4 «>4х4</option> </select>

Где «cont-form» — это ID формы.

Надеюсь, данная статья поможет вам разобраться, как сделать в html выпадающий список для своего сайта. Если вам понравилась данная статья, не забудьте поделиться ею в социальных сетях и оставить комментарий. Так же вы можете заглянуть на мой YouTube-канал, где найдете много интересного материала по созданию сайтов и интернет магазинов.

Успехов вам в создании выпадающих списков!
До встречи в следующих статьях!

С уважением Юлия Гусарь

Список

У Вас в браузере заблокирован JavaScript. Разрешите JavaScript для работы сайта!

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

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

autofocus

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

<select autofocus>...</select>
<select autofocus="">. ..</select>
<select autofocus="autofocus">...</select>

disabled

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

<select disabled>...</select>
<select disabled="">...</select>
<select disabled="disabled">...</select>

multiple

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

name

Имя списка. Обязательный атрибут.

required

Обязательно должен быть выбран пункт с непустым значением. Если это не выполнено, то браузер выведет сообщение, а форма на сервер отправлена не будет. Вид и содержание сообщения зависит от браузера и меняться пользователем не может (не работает в IE и Safari).

size

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

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

Пункт списка <option>

Каждый пункт списка ограничивается тегами <option>…</option>. Закрывающий тег необязателен.

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

disabled

Блокирует выбор пункта списка.

label

Метка пункта списка. Если указан атрибут label, то в списке выводится его значение вместо текста внутри тега <option> (в Firefox не работает).

selected

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

value

Значение, передаваемое сценарию в случае выбора пользователем определенного пункта. Если этот атрибут отсутствует, то в сценарий будет отослан текст, расположенный сразу после тега <option>.

Любые теги,помещенные внутри тега option, будут проигнорированы.

Для тега <option> также доступны общие атрибуты и атрибуты обработки событий.

Пример выпадающего списка

<form>
    <select name="s1">
        <option value="tea">Чай</option>
        <option value="coffee">Кофе</option>
        <option value="milk">Молоко</option>
        <option value="ham">Ветчина</option>
        <option value="cheese">Сыр</option>
    </select>
</form>

РЕЗУЛЬТАТ:

ЧайКофеМолокоВетчинаСыр

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

<form>
    <select name="s2" size="5" multiple>
        <option value ="tea">Чай</option>
        <option value ="coffee" selected>Кофе</option>
        <option value ="milk">Молоко</option>
        <option value ="ham">Ветчина</option>
        <option value ="cheese">Сыр</option>
    </select>
</form>

РЕЗУЛЬТАТ:

ЧайКофеМолокоВетчинаСыр

Группа пунктов списка <optgroup>

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

Для тега <optgroup> доступны общие атрибуты и атрибуты обработки событий.

Пример группировки пунктов списка

<form>
    <select name="s3" size="10">
        <optgroup label="HTML">
            <option value="h4">HTML3.2</option>
            <option value="h5">HTML4.0</option>
            <option value="h5">HTML5</option>
        </optgroup>
        <optgroup label="CSS">
            <option value="css1">CSS1</option>
            <option value="css2">CSS2</option>
            <option value="css3">CSS3</option>
        </optgroup>
        <option value="js">JavaScript</option>
        <option value="dhtml">DHTML</option>
    </select>
</form>

РЕЗУЛЬТАТ:

HTML3. 2HTML4.0HTML5CSS1CSS2CSS3JavaScriptDHTML

Более того, для дополнительной наглядности каждую группу с помощью CSS можно раскрасить в свой цвет.

Пример выделения цветом групп пунктов списка

<form>
    <select name="s4" size="10">
        <optgroup label="HTML">
            <option value="h4">HTML3.2</option>
            <option value="h5">HTML4.0</option>
            <option value="h5">HTML5</option>
        </optgroup>
        <optgroup label="CSS">
            <option value="css1">CSS1</option>
            <option value="css2">CSS2</option>
            <option value="css3">CSS3</option>
        </optgroup>
        <option value="js">JavaScript</option>
        <option value="dhtml">DHTML</option>
    </select>
</form>

РЕЗУЛЬТАТ:

HTML3.2HTML4.0HTML5CSS1CSS2CSS3JavaScriptDHTML

Тег 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,
  который создает выпадающий список

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

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

Описание

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> 

Результат данного примера в окне браузера:

17 Выпадающие меню CSS

Коллекция специально подобранных бесплатных выпадающих меню HTML и CSS примеров кода. Обновление коллекции за октябрь 2018 г. 3 новинки.

1. Меню CSS
2. Выпадающие списки начальной загрузки

Автор

• Зеландия
• 11 декабря 2018 г.

О коде

Расплавленное меню

Он сочетает в себе раскрывающееся меню CSS и просачивающиеся эффекты жидкого пламени.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Автор

• Марко Бесаньи
• 29 июня 2018 г.

О коде

Раскрывающееся меню HTML и CSS

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Зависимости: —

Автор

• Халида Астатин
• 29 июня 2018 г.

О коде

Градиентное меню

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

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Зависимости: font-awesome.css

Автор

• Мохамед Айман
• 28 июня 2018 г.

О коде

Главное меню

Горизонтальное меню с выпадающими эффектами в HTML и CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: ionicons.css

О коде

Меню CSS

No JS — обязательно загляните в мобильное меню.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор

• Винсент Дюран
• 28 июня 2018 г.

О коде

Выпадающее меню CSS

HTML и CSS выпадающее меню с приятным эффектом.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Зависимости: —

О коде

Горизонтальное раскрывающееся меню

Горизонтальное выпадающее меню на чистом CSS с красивыми переходами и красивой палитрой.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: ionicons.css

О коде

Раскрывающееся меню

Выпадающее меню Cool HTML & CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: font-awesome.css

Автор

• Хесус Родригес
• 25 июня 2018 г.

О коде

Необычное меню

Необычное выпадающее меню в HTML и CSS. На основе https://dribbble.com/shots/1075480-Ui-Kit-Hotel

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: font-awesome. css

Автор

• sean_codes
• 10 января 2018 г.

О коде

Рекурсивная навигация при наведении

Только CSS-рекурсивная навигация при наведении.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор

• Руслан Пивоваров
• 31 июля 2016 г.

О коде

Классные эффекты выпадающего меню

Cool выпадающее меню чистых эффектов CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор

• Сатиш кумар
• 19 февраля 2015 г.

О коде

Раскрывающееся меню

Выпадающее меню на чистом CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор

• Роберт Боргези
• 17 февраля 2015 г.

О коде

Простое раскрывающееся меню на чистом CSS

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

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор

• Коннор Брассингтон
• 16 ноября 2014 г.

О коде

Простое раскрывающееся меню на чистом CSS

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

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

О коде

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

Анимированные выпадающие меню CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор

• Каталин Рошу
• 2 сентября 2013 г.

О коде

Зигзагообразное раскрывающееся меню

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

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор

• Джон Урбанк
• 5 сентября 2012 г.

О коде

Адаптивное меню

Простое, только CSS, гибкое раскрывающееся меню.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Создание раскрывающегося меню навигации с помощью HTML5 и CSS3

Есть несколько отличных решений для раскрывающихся меню навигации, например, плагин jquery superfish. Многие из них используют множество файлов и ресурсов для создания раскрывающихся списков, но иногда они вам не нужны. Я хочу показать вам, как создать собственное простое, но стильное раскрывающееся меню, используя новые теги HTML5 и прекрасные стили CSS3.

Nav Menu (7377 загрузок)

Раскрывающийся список, который мы собираемся создать, скрывается и открывается при наведении курсора, используя только CSS. Используя новые функции переходов CSS3, мы анимируем состояния наведения и раскрывающиеся списки. Эти эффекты действуют точно так же, как эффекты javascript, которые вы использовали.Структура файлов проста. Вам понадобятся файлы index.html и style.css для хранения стилей css.

Вот предварительный просмотр того, что мы построим сегодня:

Начнем со структуры HTML. Это головная часть:

 css ">

   


 

В основной части мы добавим html-код для навигационного меню. Каждый список ul внутри li представляет собой раскрывающееся меню. Я добавил «» к каждому родительскому li, чтобы показать иерархию. Код создает двойные кавычки под прямым углом к ​​элементу.

Теперь стилизуем навигацию. Начнем со стилей для основной навигации. При желании стили для #nav id можно удалить. Они просто в центре меню. Вы можете изменить их, чтобы они соответствовали вашему дизайну.

/ * Основная навигация * /
#nav {
положение: относительное;
ширина: 620 пикселей;
маржа: 0 авто;
маржа сверху: 50 пикселей;
отступ: 10 пикселей;
}

ul # navigation {
маржа: 0px авто;
положение: относительное;
плыть налево;
граница слева: сплошной 1px # c4dbe7;
граница справа: сплошной 1px # c4dbe7;
}

ul # navigation li {
дисплей: встроенный;
размер шрифта: 12 пикселей;
font-weight: жирный;
маржа: 0;
отступ: 0;
плыть налево;
положение: относительное;
граница сверху: сплошной 1px # c4dbe7;
нижняя граница: 2px solid # c4dbe7;
}

ul # navigation li a {
отступ: 10px 25px;
цвет: # 616161;
тень текста: 1px 1px 0px #fff;
текстовое оформление: нет;
дисплей: встроенный блок;
граница справа: сплошной 1px #fff;
граница слева: сплошной цвет 1px # C2C2C2;
граница-верх: сплошной 1px #fff;
фон: # f5f5f5;

-webkit-transition: цвет 0. 2 с линейный, фон 0,2 с линейный;
-moz-transition: цвет 0.2с линейный, фон 0.2с линейный;
-o-переход: цветной 0,2 с линейный, фон 0,2 с линейный;
переход: цветной 0,2 с линейный, фон 0,2 с линейный;
}

ul # navigation li a: hover {
фон: # f8f8f8;
цвет: # 282828;
}

ul # navigation li a.first {
граница слева: 0 нет;
}

ul # navigation li a.last {
граница справа: 0 нет;
}

ul # navigation li: hover> a {
фон: #fff;
}

 

Обратите внимание, что ul # navigation li a имеет несколько стилей перехода.Они используются для создания приятного эффекта затухания при наведении курсора.

Теперь стилизуем выпадающие меню:

/ * Выпадающая навигация * /
ul # навигация li: hover> ul
{
/ * эти 2 стиля очень важны,
это те, которые заставляют раскрывающийся список появляться при наведении * /
видимость: видимая;
непрозрачность: 1;
}

ul # navigation ul, ul # navigation ul li ul {
стиль списка: нет;
    маржа: 0;
    отступ: 0;
/ * следующие 2 стиля очень важны,
это те, которые заставляют раскрывающийся список оставаться скрытым * /
    видимость: скрыта;
    непрозрачность: 0;
    позиция: абсолютная;
    z-индекс: 99999;
ширина: 180 пикселей;
фон: # f8f8f8;
box-shadow: 1px 1px 3px #ccc;
/ * css3 переходы для плавного наведения * /
-webkit-transition: непрозрачность 0. 2 с линейный, видимость 0,2 с линейный;
-moz-transition: непрозрачность 0,2 с линейная, видимость 0,2 с линейная;
-o-переход: непрозрачность 0,2 с линейная, видимость 0,2 с линейная;
переход: непрозрачность 0,2 с линейная, видимость 0,2 с линейная;
}

ul # navigation ul {
    верх: 43px;
    слева: 1px;
}

ul # navigation ul li ul {
    верх: 0;
    слева: 181px; / * сильно связано с шириной: 180 пикселей; сверху */
}

ul # navigation ul li {
ясно: оба;
ширина: 100%;
граница: 0 нет;
нижняя граница: сплошной 1px # c9c9c9;
}

ul # navigation ul li a {
фон: нет;
отступ: 7px 15px;
цвет: # 616161;
тень текста: 1px 1px 0px #fff;
текстовое оформление: нет;
дисплей: встроенный блок;
граница: 0 нет;
плыть налево;
ясно: оба;
ширина: 150 пикселей;
}
 

Теперь меню стилизовано и процесс разработки завершен.Меню готово к использованию в ваших собственных проектах. При использовании CSS3, конечно, возникают проблемы с совместимостью IE с меню. Плавные эффекты, реализованные с помощью переходов CSS3, не работают в IE, но меню все еще работает и может быть надежной альтернативой меню javascript.

Благодарю вас за ваше время и за любые отзывы / вопросы, не стесняйтесь оставлять комментарии ниже!

[Всего: 25 Среднее: 4,4 / 5]

Как создать раскрывающийся список в форме HTML5

2. Веб-дизайн и разработка
3. Разработка сайта
4. Как создать раскрывающийся список в Форма HTML5

Энди Харрис

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

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

В HTML5 / XHTML раскрывающиеся списки создаются двумя типами объектов. Общая структура использует теги , в то время как каждый из возможных вариантов имеет свой собственный тег, как показывает код веб-страницы с раскрывающимся списком: formDemo.html Демонстрация формы <форма> Выбор элементов Выбрать список один два три четыре

Список выбора — настоящая электростанция, поэтому вы должны знать, как его составлять:

1. Сначала создайте элемент . Контейнером для списка является элемент . Весь список заключен в пару .

2. Присвойте элементу select идентификатор.

   Вы будете использовать этот идентификатор для ссылки на элемент в коде.

3. Добавьте элемент option к элементу select.

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

4. Дайте каждой опции значение.

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

5. Укажите текст, который пользователь увидит между тегами и .

   Может отличаться от значения или быть таким же. (Это станет более понятным после того, как вы немного напишете код JavaScript.)

6. Добавьте столько опций, сколько хотите.

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

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

Об авторе книги

Энди Харрис сам учился программированию, потому что это было весело. Сегодня он преподает информатику, разработку игр и веб-программирование на университетском уровне и является консультантом по технологиям в штате Индиана.

Forms: Drop Down Menu

Выпадающие меню, вероятно, являются наиболее гибкими объектами, которые вы можете добавить в свои формы.

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

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

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

Итак, что бы вы ни решили — всегда есть бонус и цена, которую нужно заплатить.

---

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

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

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

---

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

Это можно сделать с помощью javascript. Если вы не занимаетесь программированием, вы можете легко создать раскрывающееся меню ссылок с помощью нашего онлайн-инструмента.

---

НАСТРОЙКИ:

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

HTML ОБЪЯСНЕНИЕ ПРИМЕР select name = size = multiple = option selected value = Раскрывающееся меню Имя поля. Видимые элементы в списке. Если да, то можно выбрать несколько вариантов. Отдельные пункты меню. По умолчанию выберите элемент. Значение для отправки, если выбрано. ButterCheeseMilk

Выпадающие меню объединяют и. Оба тега имеют открывающий и закрывающий теги. Типичный пример синтаксиса:
Молоко
Кофе
Чай

---

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

---

Тег определяет отдельные элементы в меню. Параметр значения определяет, что будет отправлено, если элемент выбран. Это не всегда то же самое, что написано в меню.Если бы наше поле было определено так: Айдахо тогда в меню будет написано «Айдахо», но когда форма будет отправлена, фактически будет отправлен сокращенный «ID». Вы можете принудительно выбрать элемент по умолчанию, добавив выбранный параметр:

---

ПРИМЕР: Посмотрите на этот пример HTML: Моя страница mydomain.com/myformhandler.cgi «method =» POST «>
Свежее молоко
Старый сыр
Горячий хлеб

 
.menu li {
    дисплей: встроенный блок;
    float: нет;
    маржа слева: -5 пикселей;
}
  

 
    маржа слева: -5 пикселей;
  

 
.menu> li {
    дисплей: встроенный блок;
    float: нет;
    маржа слева: -5 пикселей;
}
  

 
@media screen и (min-width: 48em) {

    .colors-custom # site-navigation ul ul {
        граница: нет;
        фон: красный;
    }
}
  

 

@media screen и (min-width: 48em) {

    .colors-custom # site-navigation ul ul {
        граница: нет;
        фон: # eae6e7;
    }

    . main-navigation ul li.menu-item-has-children.focus: до,
    .main-navigation ul li.menu-item-has-children: hover: before,
    .main-navigation ul li.menu-item-has-children.focus: после,
    .main-navigation ul li.menu-item-has-children: hover: after,
    .main-navigation ul li.page_item_has_children.focus: до,
    .main-navigation ul li.page_item_has_children: hover: before,
    .main-navigation ul li.page_item_has_children.focus: после,
    .main-navigation ul li.page_item_has_children: hover: after {
        дисплей: нет;
    }
}