Создание дропдаун-меню

Тренажер по CSS для пользователей с начальным уровнем подготовки.

Опубликовано 17.03.2025
Просмотры 45
Автор
Рек. время прохождения 6 минут
Упражнений 7
Комментарии 0
Тренажер CSS

Эта серия заданий поможет вам отработать навыки создания выпадающих (дропдаун) меню с использованием CSS. Вы начнете с основ скрытия и отображения подменю, затем перейдете к позиционированию, стилизации и добавлению плавных эффектов. Каждое задание предоставит вам готовый HTML-код и CSS-код с пропусками, которые вам нужно будет заполнить, чтобы достичь желаемого результата. Задания построены по принципу \"от простого к сложному\", позволяя постепенно закрепить материал. Вам предстоит работать со свойствами display, position, псевдоклассом :hover, а также основами стилизации списков и ссылок.

Список тем

Базовая структура и скрытие подменю

id: 37531_css-dropdown-01

В данном задании у вас есть простая структура меню с вложенным списком (подменю). Ваша задача - скрыть вложенный список по умолчанию, чтобы он не отображался при загрузке страницы. Используйте для этого соответствующее CSS свойство.

CSS
/* Базовые стили меню (не редактировать) */
.dropdown-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  background-color: #eee;
  display: inline-block; /* Чтобы меню не занимало всю ширину */
}

.dropdown-menu li {
  /* Оставляем место для позиционирования подменю */
}

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

.dropdown-menu a:hover {
  background-color: #ddd;
}

/* Стили подменю */
.submenu {
  list-style: none;
  padding: 0;
  margin: 0;
  background-color: #f8f8f8;
  /* Ваша задача: скрыть этот блок */
  input1: input2;
}

.submenu li a {
  padding: 8px 12px;
  color: #555;
}

.submenu li a:hover {
  background-color: #eaeaea;
}
HTML
<ul class="dropdown-menu">
  <li><a href="#">Главная</a></li>
  <li class="dropdown-item">
    <a href="#">Услуги</a>
    <ul class="submenu">
      <li><a href="#">Веб-разработка</a></li>
      <li><a href="#">Дизайн</a></li>
      <li><a href="#">SEO</a></li>
    </ul>
  </li>
  <li><a href="#">Контакты</a></li>
</ul>
Чтобы скрыть элемент, часто используется свойство `display` со значением `none`. Вам нужно применить это свойство к селектору, который выбирает вложенный список `ul`, находящийся внутри элемента списка `li` с классом `dropdown-item`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Показ подменю при наведении

id: 37531_css-dropdown-02

Теперь, когда подменю скрыто, нужно сделать так, чтобы оно появлялось, когда пользователь наводит курсор мыши на родительский пункт меню ('Услуги'). Используйте псевдокласс `:hover`.

CSS
/* Базовые стили меню (не редактировать) */
.dropdown-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  background-color: #eee;
  display: inline-block;
}

.dropdown-menu li {
  /* Оставляем место для позиционирования подменю */
}

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

.dropdown-menu a:hover {
  background-color: #ddd;
}

/* Стили подменю */
.submenu {
  list-style: none;
  padding: 0;
  margin: 0;
  background-color: #f8f8f8;
  display: none; /* Скрыто по умолчанию */
}

.submenu li a {
  padding: 8px 12px;
  color: #555;
}

.submenu li a:hover {
  background-color: #eaeaea;
}

/* Ваша задача: показать подменю при наведении на родительский элемент */
.dropdown-item:input1 .submenu {
  input2: input3;
}
HTML
<ul class="dropdown-menu">
  <li><a href="#">Главная</a></li>
  <li class="dropdown-item">
    <a href="#">Услуги</a>
    <ul class="submenu">
      <li><a href="#">Веб-разработка</a></li>
      <li><a href="#">Дизайн</a></li>
      <li><a href="#">SEO</a></li>
    </ul>
  </li>
  <li><a href="#">Контакты</a></li>
</ul>
Примените псевдокласс `:hover` к родительскому элементу списка (`li` с классом `dropdown-item`). Затем, используя комбинатор потомка или дочерний комбинатор, выберите вложенное подменю (`ul.submenu`) и установите для него свойство `display` в значение `block` (или другое подходящее значение, которое сделает блок видимым).
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Позиционирование подменю: основы

id: 37531_css-dropdown-03

Сейчас подменю появляется, но сдвигает другие элементы. Чтобы этого избежать и расположить подменю относительно родительского пункта, нужно изменить их позиционирование. Задайте родительскому пункту меню (`li.dropdown-item`) относительное позиционирование, а самому подменю (`ul.submenu`) - абсолютное.

CSS
/* Базовые стили меню (не редактировать) */
.dropdown-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  background-color: #eee;
  display: inline-block;
}

.dropdown-menu li {
  /* Ваша задача: задать позиционирование для родительского LI */
  input1: input2;
}

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

.dropdown-menu a:hover {
  background-color: #ddd;
}

/* Стили подменю */
.submenu {
  list-style: none;
  padding: 0;
  margin: 0;
  background-color: #f8f8f8;
  display: none; /* Скрыто по умолчанию */
  /* Ваша задача: задать позиционирование для подменю */
  input3: input4;
  /* Добавим ширину, чтобы текст не переносился */
  min-width: 150px;
}

.submenu li a {
  padding: 8px 12px;
  color: #555;
}

.submenu li a:hover {
  background-color: #eaeaea;
}

/* Показ подменю при наведении */
.dropdown-item:hover .submenu {
  display: block;
}
HTML
<ul class="dropdown-menu">
  <li><a href="#">Главная</a></li>
  <li class="dropdown-item">
    <a href="#">Услуги</a>
    <ul class="submenu">
      <li><a href="#">Веб-разработка</a></li>
      <li><a href="#">Дизайн</a></li>
      <li><a href="#">SEO</a></li>
    </ul>
  </li>
  <li><a href="#">Контакты</a></li>
</ul>
Используйте свойство `position`. Для родительского элемента (`li.dropdown-item`) установите значение `relative`. Для дочернего подменю (`ul.submenu`) установите значение `absolute`. Это позволит позиционировать подменю относительно родительского `li`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Точное позиционирование подменю

id: 37531_css-dropdown-04

Подменю теперь позиционируется абсолютно, но может перекрывать родительский пункт. Ваша задача — расположить подменю точно под родительским пунктом меню. Используйте свойства позиционирования `top` и `left`.

CSS
/* Базовые стили меню (не редактировать) */
.dropdown-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  background-color: #eee;
  display: inline-block;
}

.dropdown-menu li {
  position: relative; /* Родительский LI */
}

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

.dropdown-menu a:hover {
  background-color: #ddd;
}

/* Стили подменю */
.submenu {
  list-style: none;
  padding: 0;
  margin: 0;
  background-color: #f8f8f8;
  display: none; /* Скрыто по умолчанию */
  position: absolute; /* Абсолютное позиционирование */
  min-width: 150px;
  /* Ваша задача: расположить подменю под родительским элементом */
  input1: 100%;
  input2: 0;
}

.submenu li a {
  padding: 8px 12px;
  color: #555;
}

.submenu li a:hover {
  background-color: #eaeaea;
}

/* Показ подменю при наведении */
.dropdown-item:hover .submenu {
  display: block;
}
HTML
<ul class="dropdown-menu">
  <li><a href="#">Главная</a></li>
  <li class="dropdown-item">
    <a href="#">Услуги</a>
    <ul class="submenu">
      <li><a href="#">Веб-разработка</a></li>
      <li><a href="#">Дизайн</a></li>
      <li><a href="#">SEO</a></li>
    </ul>
  </li>
  <li><a href="#">Контакты</a></li>
</ul>
Для абсолютно позиционированного элемента (`ul.submenu`) установите свойство `top` в значение `100%`. Это сместит верхний край подменю на всю высоту родительского элемента `li`. Установите свойство `left` в `0`, чтобы выровнять левый край подменю с левым краем родительского элемента.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Добавление тени и скругление углов

id: 37531_css-dropdown-05

Чтобы визуально отделить подменю от остального контента и сделать его более привлекательным, добавьте ему небольшую тень и слегка скруглите углы.

CSS
/* Базовые стили меню (не редактировать) */
.dropdown-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  background-color: #eee;
  display: inline-block;
}

.dropdown-menu li {
  position: relative;
}

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

.dropdown-menu a:hover {
  background-color: #ddd;
}

/* Стили подменю */
.submenu {
  list-style: none;
  padding: 0;
  margin: 0;
  background-color: #f8f8f8;
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 150px;
  /* Ваша задача: добавить тень */
  input1: 0px 2px 5px rgba(0,0,0,0.2);
  /* Ваша задача: скруглить углы */
  input2: 4px;
}

.submenu li a {
  padding: 8px 12px;
  color: #555;
}

.submenu li a:hover {
  background-color: #eaeaea;
}

/* Показ подменю при наведении */
.dropdown-item:hover .submenu {
  display: block;
}
HTML
<ul class="dropdown-menu">
  <li><a href="#">Главная</a></li>
  <li class="dropdown-item">
    <a href="#">Услуги</a>
    <ul class="submenu">
      <li><a href="#">Веб-разработка</a></li>
      <li><a href="#">Дизайн</a></li>
      <li><a href="#">SEO</a></li>
    </ul>
  </li>
  <li><a href="#">Контакты</a></li>
</ul>
Используйте свойство `box-shadow` для добавления тени. Например, значение `0px 2px 5px rgba(0,0,0,0.2)` создаст небольшую тень снизу. Для скругления углов используйте свойство `border-radius`. Значение `4px` или `5px` будет достаточно.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Плавное появление подменю

id: 37531_css-dropdown-06

Резкое появление подменю может быть не очень приятным для глаза. Давайте сделаем его появление плавным, используя CSS переходы. Вместо `display` будем использовать `opacity` и `visibility`.

CSS
/* Базовые стили меню (не редактировать) */
.dropdown-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  background-color: #eee;
  display: inline-block;
}

.dropdown-menu li {
  position: relative;
}

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

.dropdown-menu a:hover {
  background-color: #ddd;
}

/* Стили подменю */
.submenu {
  list-style: none;
  padding: 0;
  margin: 0;
  background-color: #f8f8f8;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 150px;
  box-shadow: 0px 2px 5px rgba(0,0,0,0.2);
  border-radius: 4px;
  /* Ваша задача: скрыть через opacity и visibility */
  input1: 0;
  input2: hidden;
  /* Ваша задача: добавить плавный переход */
  input3: opacity 0.3s ease, visibility 0.3s ease;
}

.submenu li a {
  padding: 8px 12px;
  color: #555;
}

.submenu li a:hover {
  background-color: #eaeaea;
}

/* Показ подменю при наведении */
.dropdown-item:hover .submenu {
  /* Ваша задача: показать через opacity и visibility */
  input4: 1;
  input5: visible;
}
HTML
<ul class="dropdown-menu">
  <li><a href="#">Главная</a></li>
  <li class="dropdown-item">
    <a href="#">Услуги</a>
    <ul class="submenu">
      <li><a href="#">Веб-разработка</a></li>
      <li><a href="#">Дизайн</a></li>
      <li><a href="#">SEO</a></li>
    </ul>
  </li>
  <li><a href="#">Контакты</a></li>
</ul>
1. Измените способ скрытия подменю по умолчанию: вместо `display: none;` используйте `opacity: 0;` и `visibility: hidden;`. 2. Измените способ показа подменю при наведении: вместо `display: block;` используйте `opacity: 1;` и `visibility: visible;`. 3. Добавьте свойство `transition` к подменю (`ul.submenu`), чтобы анимировать изменение прозрачности. Например: `transition: opacity 0.3s ease, visibility 0.3s ease;`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Добавление индикатора (стрелки)

id: 37531_css-dropdown-07

Чтобы пользователю было понятнее, что у пункта меню есть вложенное подменю, можно добавить небольшую стрелку-индикатор рядом с текстом родительского пункта. Используйте для этого псевдоэлемент.

CSS
/* Базовые стили меню (не редактировать) */
.dropdown-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  background-color: #eee;
  display: inline-block;
}

.dropdown-menu li {
  position: relative;
}

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

.dropdown-menu a:hover {
  background-color: #ddd;
}

/* Стили подменю */
.submenu {
  list-style: none;
  padding: 0;
  margin: 0;
  background-color: #f8f8f8;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 150px;
  box-shadow: 0px 2px 5px rgba(0,0,0,0.2);
  border-radius: 4px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.submenu li a {
  padding: 8px 12px;
  color: #555;
}

.submenu li a:hover {
  background-color: #eaeaea;
}

/* Показ подменю при наведении */
.dropdown-item:hover .submenu {
  opacity: 1;
  visibility: visible;
}

/* Ваша задача: добавить стрелку к пункту 'Услуги' */
.dropdown-item > a::input1 {
  input2: ""; /* Обязательно для псевдоэлемента */
  display: inline-block; /* Чтобы можно было задать размеры и отступы */
  width: 0;
  height: 0;
  margin-left: 5px; /* Небольшой отступ от текста */
  vertical-align: middle; /* Выравнивание по центру текста */
  /* Создание треугольника */
  border-top: 5px solid #333; /* Верхняя (видимая) часть стрелки */
  border-right: 5px solid transparent;
  border-bottom: 0 solid transparent;
  border-left: 5px solid transparent;
}
HTML
<ul class="dropdown-menu">
  <li><a href="#">Главная</a></li>
  <li class="dropdown-item">
    <a href="#">Услуги</a>
    <ul class="submenu">
      <li><a href="#">Веб-разработка</a></li>
      <li><a href="#">Дизайн</a></li>
      <li><a href="#">SEO</a></li>
    </ul>
  </li>
  <li><a href="#">Контакты</a></li>
</ul>
Используйте псевдоэлемент `::after` для ссылки (`a`) внутри `li.dropdown-item`. 1. Задайте `content: ""` для псевдоэлемента. 2. Используйте `border` для создания треугольника (например, `border: 5px solid transparent; border-top-color: #333;`). 3. Установите `display: inline-block;` или `position: absolute;` для позиционирования стрелки. 4. Добавьте небольшой отступ слева (`margin-left`) или используйте абсолютное позиционирование (`right`, `top`) для размещения стрелки рядом с текстом.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку
Предыдущая темаСледующая тема
НайтиКурс.Ру