Активные ссылки в навигации

Question

не могу понять как сделать что бы желтый прямоугольник плавно переезжал к активному пункту меню при наведении(mouseenter), нужно реализовать на js. пробовал добавлять активный класс каждой ссылке при mouseenter, но тогда желтый прямоугльник просто появляется возле активной ссылки что не совсем решение(

Answer 1

Для желтого элемента

position:absolute

Дальше при наведении мыши на пункт меню считываете его координаты слева, после перемещаете желтый элемент на это значение.

Answer 2

Оранжевому блоку дать

position: absolute;
left: 0;
transition: left 0.3s;

При наведении - переключать ему left на 0 / 25 / 50 / 75% (в зависимости от кол-ва и позиционирования блоков), пусть CSS сам анимирует перемещение.

let pointer = document.querySelector(".pointer");

let a = document.querySelectorAll("nav a");
for (let i = 0; i < a.length; i++) {
  a[i].addEventListener("mouseenter", highlight);
}

function highlight(e) {
  let index = [].indexOf.call(a, this);
  // this — элемент, на который наведена мышка.
  // Находит его номер среди всех ссылок `a`
  
  pointer.style.left = index * 100 / a.length + "%";
}

nav {
  display: flex;
  position: relative;
}

nav .pointer {
  position: absolute;
  left: 0;
  
  height: 100%;
  width: 12.5%;
  border: 2px solid orange;
  border-right: none;
  
  transition: left 0.3s;
  z-index: -1;
}

nav a {
  width: 25%;
  font-size: 36px;
  font-family: Impact;
  text-align: center;
  text-decoration: none;
  color: #123;
}

<nav>
  <a href="#">111</a>
  <a href="#">222</a>
  <a href="#">333</a>
  <a href="#">444</a>
  
  <div class="pointer"></div>
</nav>

Answer 3

Можно также и на CSS без использования JavaScript. Анимация при наведении. Пример:

nav {
  display: flex;
  position: relative;
  overflow: hidden;
  border-left: 2px solid orange;
}

nav a {
  width: 25%;
  font-size: 36px;
  font-family: Impact;
  text-align: center;
  text-decoration: none;
  color: #123;
}

nav .pointer {
  position: absolute;
  left: -14.5%;
  height: 100%;
  width: 12.5%;
  border: 2px solid orange;
  border-right: none;
  transition: left 0.3s;
  z-index: -1;
  box-sizing: border-box;
}

nav a:nth-child(1):hover~.pointer {
  left: 0%;
}

nav a:nth-child(2):hover~.pointer {
  left: 25%;
}

nav a:nth-child(3):hover~.pointer {
  left: 50%;
}

nav a:nth-child(4):hover~.pointer {
  left: 75%;
}

<nav>
  <a href="#">111</a>
  <a href="#">222</a>
  <a href="#">333</a>
  <a href="#">444</a>
  <div class="pointer"></div>
</nav>

БЛОГ НА HUSL

Активные ссылки в навигации

Ответы (3 шт):