CSS Выпадающие списки
Создание выпадающего списка, когда при наведении появляется элемент.
Пример
.dropdown-content display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
>
.dropdown:hover .dropdown-content display: block;
>
Объяснение примера
HTML) Использовать любой элемент для открытия выпадающего списка, например: элемент a , или a .
Использовать элемент контейнера (например: ) для создания выпадающего списка и всего, того, что угодно вы хотите добавить внутри его.
Оберните элемент вокруг элементов, чтобы правильно расположить выпадающие содержимое с помощью CSS.
CSS) Класс .dropdown использует position:relative , которая необходима, чтобы выпадающее содержимое находилось прямо под выпадающем кнопкой (с помощью position:absolute ).
Класс .dropdown-content содержит фактическое содержимое выпадающего списка. Он скрыт по умолчанию, и будет отображаться при наведении (см. ниже).
Примечание: min-width имеет значение 160 пикселей. Не бойтесь изменить его.
Совет: Если вы хотите, чтобы ширина выпадающего контента была, как выпадающая кнопку , установите width в 100 процентов (и overflow:auto включить прокрутку на маленьких экранах).
Вместо использования границы мы использовали CSS свойство box-shadow для того, чтобы сделать выпадающее меню как «карточку».
Селектор :hover используется для отображения выпадающего меню, при перемещении наведите указатель мыши на кнопку раскрывающегося списка.
Выпадающее меню
Создание выпадающего меню, позволяющего пользователю выбрать параметр из списка:
Выпадающее Меню
Этот пример похож на предыдущий, за исключением того, что мы добавляем ссылки в выпадающем окне и стиль под кнопки в выпадающем стиле:
Пример
/* контейнер — необходим для размещения выпадающего содержимого */
.dropdown position: relative;
display: inline-block;
>
/* Выпадающей контент (по умолчанию скрыт) */
.dropdown-content display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
>
/* Ссылки внутри выпадающего списка */
.dropdown-content a color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
>
/* Изменить цвет выпадающих ссылок при наведении */
.dropdown-content a:hover
/* Показать выпадающее меню при наведении */
.dropdown:hover .dropdown-content display: block;
>
/* Изменить цвет фона выпадающего кнопка при отображении выпадающего списка */
.dropdown:hover .dropbtn background-color: #3e8e41;
>
Создаем выпадающее меню CSS
В сегодняшней статье я хотел бы рассказать, как создать на CSS2.1 и HTML выпадающее меню. Также я покажу один небольшой трюк, при помощи которого можно будет добавлять иконку «+» к элементам навигации в том случае, если в них скрыто выпадающее меню. Для этого мы воспользуемся псевдоэлементом :only-child .
Исходный код
Демо
Для начала мы создадим базовую структуру навигационного меню, состоящего из шести пунктов:
Далее нам нужно добавить базовые CSS-стили для HTML горизонтального меню. Я оставил комментарии к каждому блоку кода:
/* задаем цвет фона для контейнера nav. */ nav < margin: 100px 0; background-color: #E64A19; >/* убираем отступы и поля, а также list-style для «ul», * и добавляем «position:relative» */ nav ul < padding:0; margin:0; list-style: none; position: relative; >/* применяем inline-block позиционирование к элементам навигации */ nav ul li < margin: 0px -7px 0 0; display:inline-block; background-color: #E64A19; >/* стилизуем ссылки */ nav a < display:block; padding:0 10px; color:#FFF; font-size:20px; line-height: 60px; text-decoration:none; >/* изменяем цвет фона при наведении курсора */ nav a:hover
После применения стилей у нас должно получиться нечто вроде этого:
-
внутрь элемента
для пункта, в котором нужно скрыть выпадающий список:
-
после анкорного тега ().
Теперь добавим CSS-стили , чтобы выпадающий список был скрыт по умолчанию, и появлялся, когда посетитель наводит курсор мыши на соответствующий родительский элемент HTML меню для сайта. После приведенного выше CSS-кода добавьте следующий фрагмент:
/* скрываем выпадающие списки по умолчанию * и задаем абсолютное позиционирование */ nav ul ul < display: none; position: absolute; top: 100%; >/* отображаем выпадающий список при наведении */ nav ul li:hover > ul < display:inherit; >/* первый уровень выпадающего списка */ nav ul ul li
Если до этого момента вы все делали правильно, то при наведении курсора на пункт меню « WordPress » должны увидеть выпадающий список с тремя другими пунктами (« Themes », « Plugins », « Tutorials »):
Взгляните на приведенный ниже HTML-код , в котором мы добавляем второй уровень выпадающего списка к пункту меню « Tutorial », который находится внутри пункта « WordPress »:
Чтобы вертикальное меню HTML отображалось корректно, нужно добавить еще пару строк CSS кода :
/* второй, третий и последующие уровни * смещаем 2 и 3 уровни влево * на значение длины первого уровня. */ nav ul ul ul
Если все сделано правильно, у вас должно получиться нечто вроде этого:
Этот процесс можно повторять, и добавлять новые уровни. Но не следует добавлять их к последнему элементу выпадающего списка, так как я сделал это лишь для примера.
Добавляем индикатор выпадающего списка
Перед тем, как сделать выпадающее меню в HTML до конца, разберемся с индикатором, который указывает на наличие выпадающего списка, прикрепленного к тому или иному пункту меню (знак «+» ):
/* измените ‘ +’ на любой другой символ, если нужно */ li > a:after < content: ' +'; >li > a:only-child:after
Значит, вы все сделали правильно.
В завершение
Многие для достижения подобного эффекта используют jQuery или другие библиотеки. Я считаю, что в этой статье приведен самый простой и легкий вариант. Но выбор за вами.
А как вы сделали меню на HTML ? Пожалуйста, расскажите об этом в комментариях.
Как создать выпадающий список в форме
Узнайте, как создать выпадающий список в форме и обработать выбор пользователя с помощью HTML и JavaScript!
Алексей Кодов
Автор статьи
1 июня 2023 в 13:26
В процессе создания веб-страницы, иногда возникает потребность добавить выпадающий список в форму. Выпадающие списки являются удобным способом предоставления пользователю возможности выбора из предопределенного набора опций. В этой статье мы рассмотрим, как создать выпадающий список с использованием HTML и немного JavaScript для обработки выбора пользователя.
Создание выпадающего списка с помощью HTML
Для создания выпадающего списка в HTML используется тег в сочетании с тегом . Тег определяет контейнер для списка, а тег используется для определения каждого элемента списка.
Пример создания выпадающего списка:
В этом примере создается форма с выпадающим списком, содержащим три опции: яблоко, банан и апельсин. Значения опций ( value ) будут отправлены на сервер при отправке формы.
Веб-разработчик: новая работа через 9 месяцев
Получится, даже если у вас нет опыта в IT
Обработка выбора пользователя с помощью JavaScript
Чтобы сделать выпадающий список более интерактивным, можно добавить обработчик событий с использованием JavaScript. В этом примере мы добавим обработчик события change , который будет вызываться при изменении выбранного элемента списка.
function handleFruitChange() В этом примере при изменении выбранного элемента списка вызывается функция handleFruitChange() , которая выводит сообщение с выбранным фруктом.
�� Теперь вы знаете, как создать выпадающий список в форме и обработать выбор пользователя с использованием HTML и JavaScript! Это базовые знания, которые пригодятся при создании веб-страниц с формами. Не забывайте продолжать изучать и экспериментировать с HTML, CSS и JavaScript для создания еще более интересных и функциональных сайтов.
Если вам нужна дополнительная помощь или вы хотите углубить свои знания в веб-разработке, рекомендую посетить
Как сделать выпадающий список в html
Тег в HTML используется для создания выпадающего списка в HTML форме. С помощью атрибута multiple можно создать список с выбором нескольких значений (список с множественным выбором). Пункты выпадающего списка определяются с помощью тега . Тег определяет группы пунктов внутри выпадающего списка HTML.
name="colors"> value="1">Синий value="2" selected>Зеленый value="3">Желтый value="4">Красный value="5">Оранжевый value="6">Черный 
Результат: