Анимированный индикатор для пунктов меню на сайте

Сегодня мы с вами создадим стильный анимированный индикатор для навигационного меню. При клике на любой пункт меню под ним плавно появляется выделенная «подложка» с закруглёнными углами и аккуратными вырезами по бокам — как в современных премиум-дизайнах. Это сделает ваш сайт более живым, интерактивным и удобным для пользователей. Никаких библиотек — только HTML, CSS и немного JavaScript.

Пример работает сразу: кликайте по пунктам меню — и увидите, как индикатор плавно перемещается под активный элемент. Эффект построен на динамическом изменении позиции и ширины элемента через JS, а плавность обеспечивает CSS-переход.

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

Скопируйте три блока ниже — HTML, CSS и JavaScript — и вставьте в свой проект. Всё готово к работе.

HTML

<header class="example_header">
  <a href="#" class="example_logo">logotype</a>
  <nav class="menu_ndicator">
    <div id="indicator"></div>
    <a href="#">Главня</a>
    <a href="#">Продукты</a>
    <a href="#">О нас</a>
    <a href="#">Контакты</a>
  </nav>
</header>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}

body {
  background-color: #555;
}

.example_header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: sans-serif;
  background-color: rgb(41, 41, 233);
  padding: 10px 40px;
}

.example_header::before {
  content: '';
  position: absolute;
  left: 0;
  top: 100%;
  height: 15px;
  width: 100%;
  background: #555;
}

.example_logo {
  font-weight: 500;
  font-size: 35px;
  color: beige;
  text-decoration: none;
}

.menu_ndicator {
  display: flex;
  gap: 10px;
}

.menu_ndicator a {
  position: relative;
  color: beige;
  text-decoration: none;
  letter-spacing: 1px;
  padding: 10px 20px;
}

#indicator {
  position: absolute;
  width: 110px;
  height: 50px;
  background-color: #555;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  transition: 0.3s linear;
}

#indicator::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: -30px;
  width: 30px;
  height: 30px;
  background-color: transparent;
  border-bottom-right-radius: 20px;
  box-shadow: 5px 5px 0 5px #555;
}

#indicator::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: -30px;
  width: 30px;
  height: 30px;
  background-color: transparent;
  border-bottom-left-radius: 20px;
  box-shadow: -5px 5px 0 5px #555;
}

JavaScript

let indicator = document.querySelector('#indicator');
let menuPuncts = document.querySelectorAll('.menu_ndicator a');

function marker(e) {
  indicator.style.left = e.offsetLeft + 'px';
  indicator.style.width = e.offsetWidth + 'px';
}

menuPuncts.forEach(punct => {
  punct.addEventListener('click', (e) => {
    marker(e.target);
  });
});

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

• Индикатор (#indicator) — абсолютный элемент, который перемещается через left и width.
• Вырезы по бокам — создаются через ::before и ::after с box-shadow.
• Плавность — transition: 0.3s linear на позицию и размер.
• JS — при клике вычисляет offsetLeft и offsetWidth активного пункта.

• Цвета: поменяйте background-color хедера и индикатора.
• Шрифт: замените font-family в *.
• Размеры: настройте padding в ссылках и высоту индикатора.
• Закругления: измените border-radius.
• Активное состояние по умолчанию: добавьте в JS вызов marker(menuPuncts) при загрузке.

Готово! Теперь ваше меню выглядит профессионально и реагирует на действия пользователя. Используйте на лендингах, корпоративных сайтах, портфолио — везде, где важна интерактивность.

Хотите современный сайт с анимациями? Закажите разработку у oWeb Solutions— с уникальным дизайном и без шаблонов.