Как сделать выпадающий список с помощью CSS: Пошаговое руководство

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

Зачем нужен выпадающий список?

Выпадающие списки позволяют удобно структурировать информацию и упрощают навигацию по сайту. Их можно использовать для:

создания меню навигации;
категоризации контента;
упрощения пользовательского интерфейса.

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

Этапы создания выпадающего списка

Для создания выпадающего списка мы используем комбинацию HTML и CSS. Рассмотрим пошаговый процесс.

1. Разметка HTML

Создайте структуру списка с помощью HTML:

<nav>
  <ul class="menu">
	<li><a href="#">Главная</a></li>
	<li class="dropdown">
	  <a href="#">Услуги</a>
	  <ul class="submenu">
		<li><a href="#">Дизайн</a></li>
		<li><a href="#">Разработка</a></li>
		<li><a href="#">Маркетинг</a></li>
	  </ul>
	</li>
	<li><a href="#">Контакты</a></li>
  </ul>
</nav>

Здесь основное меню создаётся с помощью

2. Стилизация CSS

Добавьте стили для базового и выпадающего списка:

/* Стили для основного меню */
.menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  background-color: #333;
}

.menu li {
  position: relative;
}

.menu a {
  display: block;
  padding: 10px 20px;
  color: #fff;
  text-decoration: none;
}

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

/* Скрываем подменю по умолчанию */
.submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  list-style: none;
  padding: 0;
  margin: 0;
  background-color: #333;
  z-index: 1000;
}

.submenu li {
  width: 200px;
}

.submenu a {
  padding: 10px;
  color: #fff;
  text-decoration: none;
}

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

/* Отображение подменю при наведении */
.dropdown:hover .submenu {
  display: block;
}

Этот код делает меню горизонтальным, а подменю появляется при наведении на родительский элемент.

3. Анимация (опционально)

Для улучшения пользовательского опыта можно добавить плавную анимацию:

/* Добавляем анимацию для подменю */
.submenu {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.3s, transform 0.3s;
}

.dropdown:hover .submenu {
  opacity: 1;
  transform: translateY(0);
}

Теперь подменю появляется с плавным эффектом.

Пример готового выпадающего списка

Вот итоговый пример кода, который вы можете использовать:

<nav>
  <ul class="menu">
	<li><a href="#">Главная</a></li>
	<li class="dropdown">
	  <a href="#">Услуги</a>
	  <ul class="submenu">
		<li><a href="#">Дизайн</a></li>
		<li><a href="#">Разработка</a></li>
		<li><a href="#">Маркетинг</a></li>
	  </ul>
	</li>
	<li><a href="#">Контакты</a></li>
  </ul>
</nav>

<style>
  /* Вставьте сюда CSS-код из предыдущего раздела */
</style>

Вывод

Создание выпадающего списка с помощью CSS — это простой и эффективный способ улучшить интерфейс вашего сайта. Следуйте приведённым шагам, экспериментируйте с дизайном и добавляйте анимацию для более профессионального вида.