не могу понять как сделать что бы желтый прямоугольник плавно переезжал к активному пункту меню при наведении(mouseenter), нужно реализовать на js.
пробовал добавлять активный класс каждой ссылке при mouseenter,
но тогда желтый прямоугльник просто появляется возле активной ссылки что не совсем решение(
3 ответа
Оранжевому блоку дать
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>
-
Сдалал тоже самое но для аккрдеона. Все работает отличн, но при открытии аккордеона ранжевый блок смещается не правильно, может как то отслеживать высоту бловок по которым он перемещается? 21 янв 2021 в 15:03
-
@АртурКузьмич Нельзя точно сказать без разметки. А если добавить еще
top: 0;
? 21 янв 2021 в 15:08 -
codepen.io/artur-alexandrowich/pen/poEBLzy вот кодпен, когда открываю акоордеон желтый блк сьезжает не правильно 21 янв 2021 в 15:20
-
@АртурКузьмич Будет работать, если заменить селектор
".accordion_wrapper .accordion_item"
→".accordion_wrapper .accordion_item-heading"
и позиционирование процентами заменить наpointer.style.top = a[index].offsetTop - a[index].clientHeight / 2 + 'px';
пиксельную. Тогда придется пересчитывать на window.onresize, если это важно. 21 янв 2021 в 15:44 -
Поменял, все работает очень хорошо. Я не совсем понимаю что ты имеешь в виду под **пересчитывать на ресайзе? ** Знаю как делается, но как это влиять будет на желтый блок? 21 янв 2021 в 15:54
Можно также и на 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>
-
хорошее решение но на js решение #OPIMUS PRIME мне подходит больше, спасибо 21 янв 2021 в 15:04
Для желтого элемента
position:absolute
Дальше при наведении мыши на пункт меню считываете его координаты слева, после перемещаете желтый элемент на это значение.