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

Часть раздела Practical Frontend путешествия по HTML на Coddy — урок 20 из 35.

Выпадающее меню — это элемент навигации, который показывает дополнительные ссылки, когда пользователь наводит на него курсор или устанавливает на нем фокус. Хотя выпадающие меню можно создать с помощью JavaScript, в этой главе мы сосредоточимся на подходе, использующем только CSS, в котором для отображения скрытого меню применяются :hover или :focus-within.

Зачем их использовать:

Экономит место в навигационных панелях.
Сохраняет интерфейс чистым и организованным.
Хорошо подходит для мобильных и адаптивных дизайнов при правильной настройке.

HTML:

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

CSS:

// .dropdown имеет position: relative 
// чтобы содержимое выпадающего списка можно было правильно позиционировать с помощью position: absolute.
.dropdown {
  position: relative;
  display: inline-block;
}

//.dropdown-content по умолчанию скрыт с помощью display: none.
.dropdown-content {
  display: none;
  position: absolute;
}

//Когда пользователь наводит курсор на контейнер .dropdown, 
//.dropdown-content отображается с помощью display: block.
.dropdown:hover .dropdown-content {
  display: block;
}

С этим кодом при наведении курсора на контейнер выпадающего списка (включая кнопку) появится содержимое выпадающего списка.

Задание

Легко

Вам предоставлен HTML-код для выпадающего меню с кнопкой, подписанной "Select Color", и тремя вариантами: Red, Green, Blue.

Ваша задача — стилизовать выпадающее меню с помощью CSS так, чтобы:

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

Шпаргалка

Выпадающее меню показывает дополнительные ссылки, когда пользователь наводит на него курсор или фокусируется на нем. Используйте :hover или :focus-within, чтобы отобразить скрытое меню.

HTML-структура:

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

CSS-реализация:

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
}

.dropdown:hover .dropdown-content {
  display: block;
}

Контейнер выпадающего списка использует position: relative, чтобы содержимое выпадающего списка можно было позиционировать с помощью position: absolute. Содержимое скрыто по умолчанию с помощью display: none и отображается при наведении с помощью display: block.

Попробуйте сами

<!DOCTYPE html>
<html>
<head>
  <title>Dropdown menu</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 50px;
      background-color: #f0f0f0;
    }

    .dropdown {
      position: relative;
      display: inline-block;
    }

    .dropdown-button {
      padding: 10px 20px;
      font-size: 16px;
      cursor: pointer;
      border: 1px solid #333;
      border-radius: 5px;
      background-color: #ffffff;
    }

    .dropdown-content {
      position: absolute;
      top: 100%;
      left: 0;
      background-color: #ffffff;
      min-width: 160px;
      border: 1px solid #ccc;
      border-radius: 5px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.2);
      z-index: 1;
    }

    .dropdown-content a {
      display: block;
      padding: 10px;
      text-decoration: none;
      color: #333;
    }

    .dropdown-content a:hover {
      background-color: #f2f2f2;
    }

    /* Show dropdown on hover or focus */
    .dropdown:hover .dropdown-content,
    .dropdown:focus-within .dropdown-content {

    }
  </style>
</head>
<body>

  <div class="dropdown">
    <button class="dropdown-button">Select Color</button>
    <div class="dropdown-content">
      <a href="#">Red</a>
      <a href="#">Green</a>
      <a href="#">Blue</a>
    </div>
  </div>

</body>
</html>