Выпадающие меню в CSS

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

Выпадающее меню CSS показывает список опций или другое содержимое, когда пользователь щёлкает по элементу или наводит на него курсор, например на кнопку или ссылку навигации.

Работает оно благодаря двум частям. Первая — элемент-триггер (например, <div>, <button>, <p>, <a> и т.д.), то, по чему пользователь щёлкает или на что наводит курсор.

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

Выпадающий блок CSS с текстом

В этом первом варианте при наведении курсора на элемент <div> появляется выпадающий блок с текстом.

Выпадающий блок с текстом

Создайте выпадающий блок CSS с текстовым содержимым. Используйте контейнер div с классом "dropdown", содержащий текст "Mouse over me!" в качестве триггера. Внутри него разместите скрытый div с классом "dropdown-content", содержащий текст "Hello World!". Контейнер выпадающего блока должен использовать position: relative. Содержимое должно быть скрыто по умолчанию (display: none), использовать position: absolute, иметь светло-серый фон (#f9f9f9), минимальную ширину 130px, box-shadow 0px 8px 16px 0px rgba(0,0,0,0.2) и отступ 12px 16px. При наведении на контейнер содержимое должно становиться видимым (display: block).

> Результат: полная HTML-страница

Prompt

Создайте выпадающий блок CSS с текстовым содержимым. Используйте контейнер div с классом "dropdown", содержащий текст "Mouse over me!" в качестве триггера. Внутри него разместите скрытый div с классом "dropdown-content", содержащий текст "Hello World!". Контейнер выпадающего блока должен использовать position: relative. Содержимое должно быть скрыто по умолчанию (display: none), использовать position: absolute, иметь светло-серый фон (#f9f9f9), минимальную ширину 130px, box-shadow 0px 8px 16px 0px rgba(0,0,0,0.2) и отступ 12px 16px. При наведении на контейнер содержимое должно становиться видимым (display: block).

Результат: полная HTML-страница

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Dropdown Box with Text</title>
<style>
.dropdown {
  position: relative;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 130px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
}

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

<h2>Dropdown Text</h2>
<p>Mouse over the text below to see the dropdown content.</p>

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

</body>
</html>

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

Чтобы содержимое выпадающего меню, использующее position:absolute, оказалось прямо под элементом-триггером, классу .dropdown нужно position:relative.
Содержимое выпадающего меню находится в классе .dropdown-content; по умолчанию оно скрыто, пока наведение его не покажет.
Здесь задан min-width 130px, и вы можете свободно его менять! Чтобы ширина совпадала с шириной элемента-триггера, используйте width 100% и overflow:auto, чтобы на маленьких экранах работала прокрутка.
Вид «карточки» содержимому выпадающего меню придаёт свойство box-shadow, которое используется вместо границы.
Наконец, селектор :hover показывает содержимое выпадающего меню, когда пользователь наводит курсор на элемент <div> выпадающего меню.

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

Выпадающее меню позволяет пользователю выбрать одну опцию из списка.

Оно основано на предыдущем примере, а единственное отличие — кнопка и ссылки в выпадающем блоке, оформленные в соответствии с кнопкой выпадающего меню.

Выпадающее меню с кнопкой

Создайте выпадающее меню CSS с кнопкой-триггером. Используйте контейнер div с классом "dropdown" (position: relative). Внутри него разместите кнопку с классом "dropbtn" с надписью "Dropdown Menu", оформленную зелёным фоном (#4CAF50), белым текстом, отступом 16px, размером шрифта 16px, без границы и с курсором-указателем. Под кнопкой добавьте скрытый div с классом "dropdown-content" (display: none, position: absolute, background-color: #f9f9f9, min-width: 200px, box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2)), содержащий три ссылки: "Link 1", "Link 2" и "Link 3". Оформите ссылки чёрным цветом, отступом 12px 16px, без text-decoration и с display: block. При наведении на ссылку применяйте светло-серый фон (#f1f1f1). При наведении на контейнер выпадающего меню показывайте содержимое (display: block) и меняйте фон кнопки на более тёмный зелёный (#3e8e41).

> Результат: полная HTML-страница

Prompt

Создайте выпадающее меню CSS с кнопкой-триггером. Используйте контейнер div с классом "dropdown" (position: relative). Внутри него разместите кнопку с классом "dropbtn" с надписью "Dropdown Menu", оформленную зелёным фоном (#4CAF50), белым текстом, отступом 16px, размером шрифта 16px, без границы и с курсором-указателем. Под кнопкой добавьте скрытый div с классом "dropdown-content" (display: none, position: absolute, background-color: #f9f9f9, min-width: 200px, box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2)), содержащий три ссылки: "Link 1", "Link 2" и "Link 3". Оформите ссылки чёрным цветом, отступом 12px 16px, без text-decoration и с display: block. При наведении на ссылку применяйте светло-серый фон (#f1f1f1). При наведении на контейнер выпадающего меню показывайте содержимое (display: block) и меняйте фон кнопки на более тёмный зелёный (#3e8e41).

Результат: полная HTML-страница

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Dropdown Menu</title>
<style>
.dropdown {
  position: relative;
}

/* Style the dropdown button */
.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

/* Dropdown content */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 200px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

/* Links inside dropdown content */
.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 content on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

/* Change background color of dropdown button on hover */
.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}
</style>
</head>
<body>

<h2>Dropdown Menu</h2>
<p>Mouse over the button to see the dropdown menu.</p>

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

</body>
</html>