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

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

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

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

Список тем

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

В данном задании у вас есть простая структура меню с вложенным списком (подменю). Ваша задача - скрыть вложенный список по умолчанию, чтобы он не отображался при загрузке страницы. Используйте для этого соответствующее 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`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

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

Теперь, когда подменю скрыто, нужно сделать так, чтобы оно появлялось, когда пользователь наводит курсор мыши на родительский пункт меню ('Услуги'). Используйте псевдокласс `: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` (или другое подходящее значение, которое сделает блок видимым).
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

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

Сейчас подменю появляется, но сдвигает другие элементы. Чтобы этого избежать и расположить подменю относительно родительского пункта, нужно изменить их позиционирование. Задайте родительскому пункту меню (`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`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

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

Подменю теперь позиционируется абсолютно, но может перекрывать родительский пункт. Ваша задача — расположить подменю точно под родительским пунктом меню. Используйте свойства позиционирования `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`, чтобы выровнять левый край подменю с левым краем родительского элемента.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

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

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

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` будет достаточно.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

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

Резкое появление подменю может быть не очень приятным для глаза. Давайте сделаем его появление плавным, используя 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;`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

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

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

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`) для размещения стрелки рядом с текстом.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку
Предыдущая темаСледующая тема
НайтиКурс.Ру