Учебник по CSS

ГЛАВНАЯ CSS Введение в CSS Синтаксис CSS Селекторы CSS CSS как сделать CSS-комментарии Цвета CSS CSS-фоны CSS границы CSS поля CSS-заполнение CSS высота/ширина Блочная модель CSS Схема CSS CSS-текст CSS-шрифты CSS-иконки CSS-ссылки CSS-списки CSS-таблицы Отображение CSS Максимальная ширина CSS Позиция CSS CSS Z-индекс CSS переполнение Плавающая CSS Встроенный блок CSS Выравнивание CSS Комбинаторы CSS Псевдокласс CSS CSS-псевдоэлемент Непрозрачность CSS Панель навигации CSS Выпадающие списки CSS Галерея изображений CSS Спрайты изображений CSS Селекторы атрибутов CSS CSS-формы CSS-счетчики CSS макет веб-сайта Единицы CSS Специфика CSS CSS! важно Математические функции CSS

CSS расширенный

CSS закругленные углы Изображения границ CSS CSS-фоны Цвета CSS Цветовые ключевые слова CSS CSS-градиенты CSS-тени Текстовые эффекты CSS Веб-шрифты CSS 2D-преобразования CSS CSS 3D-преобразования CSS-переходы CSS-анимации Подсказки CSS Изображения в стиле CSS Отражение изображения CSS CSS объект-подгонка CSS-позиция объекта Маскировка CSS CSS-кнопки Разбивка на страницы CSS Несколько столбцов CSS Пользовательский интерфейс CSS CSS-переменные Размер блока CSS Медиа-запросы CSS Примеры CSS MQ CSS флексбокс

CSS Отзывчивый

Введение в задний привод Окно просмотра RWD Представление сетки RWD Медиа-запросы RWD Изображения RWD Видео с задним приводом Рамки RWD Шаблоны RWD

CSS -сетка

Введение в сетку Контейнер сетки Элемент сетки

CSS SASS

Учебник по SASS

Примеры CSS

CSS-шаблоны Примеры CSS css викторина CSS-упражнения Сертификат CSS

Ссылки на CSS

Справочник по CSS Селекторы CSS CSS-функции Справочник по CSS Безопасные веб-шрифты CSS CSS анимация Единицы CSS Конвертер CSS PX-EM Цвета CSS Значения цвета CSS Значения CSS по умолчанию Поддержка CSS-браузера

Выпадающие списки CSS


Создайте всплывающее меню с помощью CSS.


Демонстрация: примеры раскрывающегося списка

Наведите указатель мыши на приведенные ниже примеры:


Основной раскрывающийся список

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

Пример

<style>
.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);
  padding: 12px 16px;
  z-index: 1;
}

.dropdown:hover .dropdown-content {
  display: block;
}
</style>

<div class="dropdown">
  <span>Mouse over me</span>
  <div class="dropdown-content">
    <p>Hello World!</p>
  </div>
</div>

Объяснение примера

HTML) Используйте любой элемент, чтобы открыть выпадающее содержимое, например элемент <span> или элемент <button>.

Используйте элемент-контейнер (например, <div>), чтобы создать выпадающий контент и добавить в него все, что хотите.

Оберните элемент <div> вокруг элементов, чтобы правильно расположить раскрывающееся содержимое с помощью CSS.

CSS) Класс .dropdownиспользует position:relative, что необходимо, когда мы хотим, чтобы содержимое раскрывающегося списка было размещено прямо под кнопкой раскрывающегося списка (используя position:absolute).

Класс .dropdown-contentсодержит фактическое содержимое раскрывающегося списка. По умолчанию он скрыт и будет отображаться при наведении (см. ниже). Обратите внимание , что min-widthустановлено значение 160px. Не стесняйтесь изменить это. Совет. Если вы хотите, чтобы ширина выпадающего содержимого была равна ширине кнопки раскрывающегося списка, установите widthзначение 100% (и overflow:autoчтобы включить прокрутку на маленьких экранах).

Вместо рамки мы использовали box-shadowсвойство CSS, чтобы выпадающее меню выглядело как «карточка».

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



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

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

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

Пример

<style>
/* Style The Dropdown Button */
.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.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;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}
</style>

<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

Выровненный по правому краю выпадающий контент

Если вы хотите, чтобы выпадающее меню отображалось справа налево, а не слева направо, добавьте right: 0;

Пример

.dropdown-content {
  right: 0;
}

Дополнительные примеры

Выпадающее изображение

Как добавить изображение и другой контент в раскрывающийся список.

Наведите курсор на изображение:


Выпадающая панель навигации

Как добавить выпадающее меню в панель навигации.