Witam,
Potrzebuje wykonać w navigacji następujący efekt:
Po wczytaniu strony, pod link który bedzie miał klasę "active" , podjeżdżać będzie taki "suwak" o szerokości powiedzmy 100px i wysokości 5px.
Dodatkowo ma on podjeżdżać pod każdy link na który najedziemy myszką.
Problem jest taki że gdy najeżdżam myszką działa bez zarzutu, natomiast po wczytaniu ten suwak (o klasie "zip") nie ustawia się jak należy. Poprzez console.log widzę że wyliczany jest inny offsetLeft oraz offsetWidth dla linka przy najechaniu a inny przy wczytaniu.
Nie mam pojęcia o co tutaj chodzi
Poniżej zamieszczam kod
Będę bardzo wdzięczny za pomoc, pozdrawiam.
HTML :
<nav class="navbar">
<div class="container">
<div class="logo"></div>
<ul class="menu">
<li class="option"><a class="link href="#"> O nas </a></li>
<li class="option"><a class="link" href="#">Aktualności</a></li>
<li class="option"><a class="link active" href="#">Nasze sklepy</a></li>
<li class="option"><a class="link" href="#">Kontakt</a></li>
</ul>
</div>
<div class="zip"></div>
</nav>
CSS :
.navbar {
width: 100%;
height: 100px;
position: fixed;
}
.zip {
width: 100px;
height: 5px;
background-color: green;
position: absolute;
transition: .3s;
}
li {
color: #fff;
display: inline-block;
}
.link {
padding: 0 20px;
transition: .3s;
}
.menu {
width: 100%;
position: absolute;
}
JS :
let links = document.querySelectorAll('.link');
let zip = document.querySelector('.zip');
let positionLeft = '';
for ( const link of links ) {
link.addEventListener('mouseover', function() {
positionLeft = (link.offsetLeft + (link.offsetWidth / 2 )) - (50);
zip.style.left= ((positionLeft) + 'px');
console.log(link);
console.log(link.offsetLeft);
console.log(link.offsetWidth);
});
if (link.classList.contains('active')) {
positionLeft = (link.offsetLeft + (link.offsetWidth / 2 )) - (50);
zip.style.left= ((positionLeft) + 'px');
console.log(link);
console.log(link.offsetLeft);
console.log(link.offsetWidth);
}
}