Как создать анимированное меню при помощи CSS

Меню — это не просто список ссылок. Это первое, что видит пользователь. Если оно скучное — он уйдёт. Если анимированное — запомнит и кликнет. По данным Яндекс.Метрики, интерактивные элементы повышают вовлечённость на 52%, а время на сайте — на 41%. В 2025 году статичные пункты меню — прошлый век. Пользователи ждут микроанимаций: плавное «расплывание» текста, появление подписи, смена цвета. Покажем, как сделать вертикальное меню с эффектом «расплывания» при наведении — только HTML и CSS. Без JS, адаптивно, с data-атрибутами и кастомизацией. Полный код, демо, 3 варианта и чек-лист.

Каждый пункт — <a> с data-text. При наведении:

• Оригинальный текст поднимается (translateY(-15px)) и тускнеет (opacity: 0.2)
• Копия текста из data-text появляется снизу через ::before
• Буквы «расплываются» от letter-spacing: 100px → 3px
• Всё плавно: transition 0.4s с задержкой

Эффект создаётся только CSS — быстро, легко, без JS.

<nav class="animated-menu">
  <ul>
    <li>
      <a href="#" data-text="home">home</a>
    </li>
    <li>
      <a href="#" data-text="about">about</a>
    </li>
    <li>
      <a href="#" data-text="contacts">contacts</a>
    </li>
  </ul>
</nav>

.animated-menu {
  padding: 2rem 0;
  background: #1a1a2e;
  text-align: center;
}

.animated-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.animated-menu li {
  padding: 12px 0;
}

.animated-menu a {
  position: relative;
  display: inline-block;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 28px;
  color: #fff;
  transition: all 0.4s ease;
  transition-delay: 0.3s;
  font-family: 'Montserrat', sans-serif;
}

.animated-menu a:hover {
  transform: translateY(-18px);
  color: rgba(255, 255, 255, 0.15);
}

.animated-menu a::before {
  content: attr(data-text);
  position: absolute;
  bottom: -18px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 14px;
  letter-spacing: 120px;
  color: #8ed7f8;
  pointer-events: none;
  opacity: 0;
  transition: all 0.4s ease;
  white-space: nowrap;
  font-weight: 600;
}

.animated-menu a:hover::before {
  letter-spacing: 4px;
  opacity: 1;
  transition-delay: 0.3s;
}

/* Адаптивность */
@media (max-width: 768px) {
  .animated-menu a {
    font-size: 22px;
  }
  .animated-menu a::before {
    font-size: 12px;
    bottom: -14px;
  }
  .animated-menu a:hover {
    transform: translateY(-14px);
  }
}

• Плавная анимация (0.4s)
• Текст «расплывается» снизу
• Адаптив на мобильных
• data-text для кастомизации
• Без JS — быстро грузится
• Шрифт: Montserrat или аналог

Хотите анимированное меню? Закажите сайт с анимациями — UX, скорость, конверсия.

Нужен аудит? Аудит юзабилити — 15+ идей за 48 часов.