Html css выпадающий список: Красивое оформление выпадающего списка на CSS3 и jQuery
Красивое оформление выпадающего списка на 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, то раскрывающийся список отображается как «список с прокруткой». Далее два примера применения атрибута
Код 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 – подключение к форме обратной связи
Для последних трёх значение указывается в кавычках, все остальные просто дописываются к тегу <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
Атрибут 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>
<select autofocus="autofocus">...</select>
Для тега <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="">
Пример »Примечание: из-за различных способов выбора нескольких элементов и дополнительного уведомления пользователей о доступности выбора нескольких вариантов, рекомендуется вместо раскрывающегося списка использовать флажки.
- Windows: удерживайте нажатой клавишу
- name:
- Определяет имя для раскрывающегося списка. Оно может быть использовано для доступа к данным формы после ее отправки или для ссылки на элемент в JavaScript.
- size:
- Указывает количество видимых вариантов в раскрывающимся списке. Если значение атрибута
sizeбольше 1, но меньше общего количества вариантов списка, то браузер автоматически добавит полосу прокрутки, чтобы указать, что есть еще варианты для просмотра. Пример »
Возможные значения логического атрибута 
Оно может быть использовано для доступа к данным формы после ее отправки или для ссылки на элемент в JavaScript.Тег <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 новинки.
- Меню CSS
- Выпадающие списки начальной загрузки
Автор
- Зеландия
О коде
Расплавленное меню
Он сочетает в себе раскрывающееся меню CSS и просачивающиеся эффекты жидкого пламени.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Адаптивный: нет
Зависимости: —
Автор
- Марко Бесаньи
О коде
Раскрывающееся меню HTML и CSS
Совместимые браузеры: Chrome, Firefox, Opera, Safari
Зависимости: —
Автор
- Халида Астатин
О коде
Градиентное меню
Раскрывающееся меню адаптивного градиента.
Совместимые браузеры: Chrome, Firefox, Opera, Safari
Зависимости: font-awesome.css
Автор
- Мохамед Айман
О коде
Главное меню
Горизонтальное меню с выпадающими эффектами в HTML и CSS.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: ionicons.css
О коде
Меню CSS
No JS — обязательно загляните в мобильное меню.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
Автор
- Винсент Дюран
О коде
Выпадающее меню 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
Автор
- Хесус Родригес
О коде
Необычное меню
Необычное выпадающее меню в HTML и CSS. На основе https://dribbble.com/shots/1075480-Ui-Kit-Hotel
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: font-awesome.
css
Автор
- sean_codes
О коде
Рекурсивная навигация при наведении
Только CSS-рекурсивная навигация при наведении.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
Автор
- Руслан Пивоваров
О коде
Классные эффекты выпадающего меню
Cool выпадающее меню чистых эффектов CSS.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
Автор
- Сатиш кумар
О коде
Раскрывающееся меню
Выпадающее меню на чистом CSS.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
Автор
- Роберт Боргези
О коде
Простое раскрывающееся меню на чистом CSS
Меню с выпадающим списком выполнено только в CSS, со строкой, следующей за наведением курсора на строку.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
Автор
- Коннор Брассингтон
О коде
Простое раскрывающееся меню на чистом CSS
Простое, элегантно выглядящее раскрывающееся меню Эффект достигается с помощью чистого CSS. Простая функциональность, метод может быть расширен для создания вторичного выпадающего блока с небольшими изменениями.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
О коде
Выпадающее меню
Анимированные выпадающие меню CSS.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
Автор
- Каталин Рошу
О коде
Зигзагообразное раскрывающееся меню
Это еще одна концепция раскрывающегося меню .
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
Автор
- Джон Урбанк
О коде
Адаптивное меню
Простое, только CSS, гибкое раскрывающееся меню.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
Создание раскрывающегося меню навигации с помощью HTML5 и CSS3
Есть несколько отличных решений для раскрывающихся меню навигации, например, плагин jquery superfish.
Многие из них используют множество файлов и ресурсов для создания раскрывающихся списков, но иногда они вам не нужны. Я хочу показать вам, как создать собственное простое, но стильное раскрывающееся меню, используя новые теги HTML5 и прекрасные стили CSS3.
Раскрывающийся список, который мы собираемся создать, скрывается и открывается при наведении курсора, используя только CSS. Используя новые функции переходов CSS3, мы анимируем состояния наведения и раскрывающиеся списки. Эти эффекты действуют точно так же, как эффекты javascript, которые вы использовали.Структура файлов проста. Вам понадобятся файлы index.html и style.css для хранения стилей css.
Вот предварительный просмотр того, что мы построим сегодня:
Начнем со структуры HTML. Это головная часть:
Раскрывающееся меню навигации HTML5 / CSS3 css ">
В основной части мы добавим html-код для навигационного меню. Каждый список ul внутри li представляет собой раскрывающееся меню. Я добавил «» к каждому родительскому li, чтобы показать иерархию. Код создает двойные кавычки под прямым углом к элементу.