Последние учебники веб-разработки
×

CSS Руководство

CSS ГЛАВНАЯ CSS Введение CSS Синтаксис CSS Как CSS Цвета CSS Фон CSS Границы CSS Маржа CSS набивка CSS Высота ширина CSS Текст CSS шрифты CSS связи CSS Списки CSS таблицы CSS Модель Бокса CSS Outline CSS Дисплей CSS Максимальная ширина CSS Позиция CSS терка CSS Inline-block CSS выравнивать CSS Комбинаторы CSS Псевдо-класс CSS Псевдо-элемент CSS Панель навигации CSS Dropdowns CSS Всплывающие CSS Галерея CSS изображение Непрозрачность CSS спрайтов CSS Attr селекторы CSS Формы CSS Счетчики

CSS3

CSS3 Введение CSS3 Закругленные углы CSS3 Пограничные изображения CSS3 Фон CSS3 Цвета CSS3 Градиенты CSS3 Тени CSS3 Текст CSS3 шрифты CSS3 2D Трансформации CSS3 3D Трансформации CSS3 Переходы CSS3 Анимации CSS3 Изображений CSS3 Кнопки CSS3 пагинация CSS3 Несколько столбцов CSS3 Пользовательский интерфейс CSS3 Box Определение размеров CSS3 Flexbox CSS3 Медиа-запросы CSS3 Примеры MQ

CSS Адаптивный веб-дизайн

Адаптивный веб-дизайн вступление Адаптивный веб-дизайн Viewport Адаптивный веб-дизайн Вид сетки Адаптивный веб-дизайн Медиа-запросы Адаптивный веб-дизайн Изображений Адаптивный веб-дизайн Видео Адаптивный веб-дизайн Каркасы

CSS Examples

CSS Примеры CSS викторина CSS сертификат

CSS References

CSS Справка CSS Селекторы CSS функции CSS Ссылка Aural CSS Web Safe шрифты CSS Animatable CSS Единицы CSS PX-EM конвертер CSS Цвета CSS Значения цвета CSS Цвет Названия CSS3 Поддержка браузеров

 

CSS Dropdowns


Создание hoverable выпадающего меню с помощью CSS.


Демо-версия: DropDown Примеры

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


Основные Дропдаун

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

пример

<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 для включения прокрутки на маленьких экранах).

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

: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);
}

/* 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;
}
Попробуй сам "

Примеры

Еще примеры

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

Выпадающее Navbar
Этот пример показывает, как добавить выпадающее меню в панели навигации.