- Как сделать — Кликабельный выпадающий список
- Выпадающий
- Создание кликабельного выпадающего списка
- Пример
- Объяснение примера
- Пример
- Объяснение примера
- Пример
- Как создать выпадающее меню с помощью HTML и CSS
- Часть 1
- Составление HTML
- Часть 2
- Составление CSS
- Подсказки
- Как сделать — Выпадающее меню
- Создать выпадающее меню
- Пример
- Объяснение примера
- Пример
- Объяснение примера
Как сделать — Кликабельный выпадающий список
Узнать, как создать интерактивное выпадающее меню с помощью CSS и JavaScript.
Выпадающий
Выпадающее меню — это переключаемое меню, которое позволяет пользователю выбрать одно значение из предопределенного списка:
Создание кликабельного выпадающего списка
Создайте выпадающее меню, которое появляется, когда пользователь нажимает на кнопку.
Шаг 1) Добавить HTML:
Пример
Объяснение примера
Используйте любой элемент, чтобы открыть выпадающее меню, например элемент , или
.
Используйте элемент контейнера (например, ), чтобы создать раскрывающееся меню и добавить в него раскрывающиеся ссылки.
Оберните элемент вокруг кнопки и , чтобы правильно расположить выпадающее меню с помощью CSS.
Шаг 2) Добавить CSS:
Пример
/* Кнопка выпадающего списка */
.dropbtn background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
>
/* Кнопка выпадающего меню при наведении и фокусировке */
.dropbtn:hover, .dropbtn:focus background-color: #2980B9;
>
/* Контейнер — необходим для размещения выпадающего содержимого */
.dropdown position: relative;
display: inline-block;
>
/* Выпадающее содержимое (скрыто по умолчанию) */
.dropdown-content display: none;
position: absolute;
background-color: #f1f1f1;
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
/* Показать выпадающее меню (используйте JS, чтобы добавить этот класс .dropdown-content содержимого, когда пользователь нажимает на кнопку выпадающего списка) */
.show
Объяснение примера
Мы разработали выпадающую кнопку с фоновым цветом, дополнением, эффектом наведения и т.д.
Класс .dropdown использует position:relative , что необходимо, когда мы хотим, чтобы выпадающий контент был размещен прямо под кнопкой выпадающего списка (с помощью position:absolute ).
Класс .dropdown-content класс содержит фактическое выпадающее меню. Он скрыт по умолчанию и будет отображаться при наведении курсора (см. ниже). Примечание в min-width установлено значение 160px. Не стесняйтесь изменить это. Совет: Если вы хотите, чтобы ширина выпадающего контента, чтобы быть так велик, как в раскрывающееся меню, установить width на 100% (и overflow:auto , чтобы включить прокрутку на маленьких экранах).
Вместо использования границы мы использовали свойство box-shadow , чтобы сделать выпадающее меню похожим на»карточку». Мы также используем z-индекс для размещения выпадающего списка перед другими элементами.
Шаг 3) Добавить JavaScript:
Пример
/* Когда пользователь нажимает на кнопку,
переключение между скрытием и отображением раскрывающегося содержимого */
function myFunction() document.getElementById(«myDropdown»).classList.toggle(«show»);
>
// Закройте выпадающее меню, если пользователь щелкает за его пределами
window.onclick = function(event) if (!event.target.matches(‘.dropbtn’)) var dropdowns = document.getElementsByClassName(«dropdown-content»);
var i;
for (i = 0; i < dropdowns.length; i++) var openDropdown = dropdowns[i];
if (openDropdown.classList.contains(‘show’)) openDropdown.classList.remove(‘show’);
>
>
>
>
Как создать выпадающее меню с помощью HTML и CSS
Выпадающее меню позволяет создать четкое и иерархическое представление всех основных разделов. Вы можете создать выпадающее меню с HTML раскрывающимся списком, не используя ничего, кроме языка гипертекста и CSS .
Часть 1
Составление HTML
- Создание раздела навигации . Как правило, мы используем для главной панели навигации сайта тег , — для более узких разделов или , если нет других вариантов. Поместите этот код в элемент , чтобы можно было задать стили для всего меню:
- Задайте для каждого раздела название класса . Мы будем использовать атрибут класса позже, чтобы определить стиль этих элементов с помощью CSS . Задайте названия классов для контейнера и меню с раскрывающимся списком HTML :
- Добавьте список пунктов меню . Неупорядоченный список (
) содержит пункты главного меню ( - ), на которые пользователи будут наводить курсор мыши, чтобы вывести выпадающее меню. Добавьте класс » clearfix » для элементов списка. Мы вернемся к этому позже в разделе CSS :
- Добавление ссылок . Теперь нужно добавить ссылки на страницы соответствующих разделов. Даже если они не содержат ссылок на что-то, добавьте ссылки на несуществующий анкор ( например, «#!» ), чтобы курсор пользователя менял внешний вид при наведении на них. В этом примере пункт Contact Us никуда не ведет, но остальные два пункта раскрывающегося списка HTML CSS содержат ссылки на конкретные разделы:
- Создание списков вложенных элементов . После того, как мы установим стили, эти раскрывающиеся списки HTML станут выпадающими меню. Вложите список в элемент, на который пользователь будет наводить курсор. Задайте имя класса и ссылку, как мы делали ранее:
Часть 2
Составление CSS
- Откройте CSS . Разместите ссылку на CSS стили в разделе HTML-документа , если вы еще этого не сделали. В этой статье мы не будем касаться основных свойств CSS , таких как настройка шрифта и цвет фона:
- Добавьте код clearfix . Помните класс » clearfix «, который мы добавили к списку меню? Как правило, элементы HTML раскрывающегося списка имеют прозрачный фон и могут раздвигать другие элементы. Несложная настройка CSS поможет исправить эту проблему. Вот простое и красивое решение, хотя оно не поддерживается в Internet Explorer 7 и более ранних версиях:
- Создание базовой структуры . Представленный ниже код задает размещение меню вдоль верхней части страницы и скрывает выпадающие элементы. Это только каркас общей структуры, который позволяет сосредоточиться на других элементах раскрывающегося свертывающегося списка HTML . Вы можете позже расширить его дополнительными свойствами CSS , такими как отступы и интервалы:
.nav-wrapper < width:100%; background: #999; >.nav-menu < position:relative; display:inline-block; >.nav-menu li < display: inline; list-style-type: none; >.sub-menu
- Задаем вывод выпадающих элементов при наведении курсора мыши . Элементы в выпадающем списке по умолчанию скрыты. Вот как реализуется вывод вложенного списка при наведении курсора мыши на родительский элемент:
Если пункты древовидного раскрывающегося списка HTML меню ведут к дополнительным подчиненным выпадающим меню, то любые свойства, добавляемые здесь, будут влиять на них. Если вы хотите задать стиль только для выпадающих меню первого уровня, используйте вместо этого » .nav-menu > ul «:
- Маркирование выпадающих меню стрелками . Веб-дизайнеры, как правило, показывают, что элемент содержит вложенное выпадающее меню, с помощью стрелки вниз. Следующий код добавляет стрелку к каждому элементу меню:
Изменить положение стрелки можно с помощью свойств up , bottom , right или left .
Если не все пункты раскрывающегося списка HTML содержат вложенные выпадающие меню, не задавайте стиль для всего класса nav-menu . Вместо этого добавьте еще один класс ( например, dropdown ) для каждого элемента li , к которому нужно добавить стрелку. Укажите этот класс, а не приведенный в коде выше:
- Настройка отступов, фона и других свойств . Теперь наше меню является функциональным, но мы можем несколько улучшить его внешний вид с помощью редактирования кода CSS .
Подсказки
- Если вы хотите добавить выпадающее меню в форму, HTML 5 позволяет легко сделать это с помощью элемента ;
- Ссылка прокручивает страницу вверх, в то время как ссылка на несуществующий анкор, такая как , не будет прокручивать страницу. Если это кажется вам не слишком аккуратным, то можно изменить внешний вид курсора с помощью CSS .
Как сделать — Выпадающее меню
Выпадающее меню — это переключаемое меню, которое позволяет пользователю выбрать одно значение из предопределенного списка:
Создать выпадающее меню
Создайте выпадающее меню, которое появляется при наведении курсора мыши на элемент.
Шаг 1) Добавить HTML:
Пример
Объяснение примера
Используйте любой элемент, чтобы открыть выпадающее меню, например элемент , или
.
Используйте элемент контейнера (например, ), чтобы создать раскрывающееся меню и добавить в него раскрывающиеся ссылки.
Оберните элемент вокруг кнопки и , чтобы правильно расположить выпадающее меню с помощью CSS.
Шаг 2) Добавить CSS:
Пример
/* Кнопка выпадающего списка */
.dropbtn background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
>
/* Контейнер — необходим для размещения выпадающего содержимого */
.dropdown position: relative;
display: inline-block;
>
/* Выпадающее содержимое (скрыто по умолчанию) */
.dropdown-content display: none;
position: absolute;
background-color: #f1f1f1;
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
/* Изменение цвета фона кнопки раскрывающегося списка при отображении содержимого раскрывающегося списка */
.dropdown:hover .dropbtn
Объяснение примера
Мы оформили кнопку выпадающего списка с цветом фона, отступами и т.д.
Класс .dropdown использует position:relative , что необходимо, когда мы хотим, чтобы выпадающий контент был размещен прямо под кнопкой выпадающего списка (с помощью position:absolute ).
Класс .dropdown-content содержит фактическое выпадающее меню. Он скрыт по умолчанию и будет отображаться при наведении курсора (см. ниже). Примечание установлено значение min-width 160px. Не стесняйтесь изменить это. Совет: Если вы хотите, чтобы ширина раскрывающегося содержимого была такой же широкой, как кнопка раскрывающегося списка, установите width на 100% (и overflow:auto чтобы включить прокрутку на небольших экранах).
Вместо того, чтобы использовать границу, мы использовали свойство box-shadow чтобы сделать выпадающее меню похожим на «карту». Мы также используем z-индекс для размещения выпадающего списка перед другими элементами.
Селектор :hover используется для отображения выпадающего меню, когда пользователь перемещает курсор мыши на кнопку раскрывающегося списка.