I have a client that wants a green dot to appear under the current page in the Navigation bar. I thought it would be cool to have the dot travel to each nav link that is being hovered.
I typed in this prompt to ChatGPT and boom! It wrote me this code that works perfectly. It took a couple iterations but it works perfectly now.
The code it generated:
.dot {
width: 8px;
height: 8px;
position: absolute;
bottom: 0.75em;
background-color: #6dcda7;
border-radius: 100vw;
transition: all 0.3s;
}
}
// dot on nav menu
let navMenu = document.querySelector('.nav-menu');
let navLinks = navMenu.querySelectorAll('.nav-link');
let currentPage = window.location.href;
let navMenuPos = navMenu.getBoundingClientRect();
let dot = document.createElement('span');
dot.classList.add('dot');
navMenu.appendChild(dot);
function moveDot(link) {
let linkPos = link.getBoundingClientRect();
let linkCenter = (linkPos.left - navMenuPos.left) + (linkPos.width / 2);
dot.style.left = linkCenter + 'px';
}
window.addEventListener('resize', function() {
navMenuPos = navMenu.getBoundingClientRect();
});
navLinks.forEach(link => {
if (link.href === currentPage) {
// get the x position of the nav-link and set it to the dot
moveDot(link);
}
link.addEventListener('mouseover', function() {
moveDot(this);
});
link.addEventListener('mouseout', function() {
// get the x position of the current page nav-link and set it to the dot
navLinks.forEach(link => {
if (link.href === currentPage) {
moveDot(link);
}
});
});
});
And just like that I had exactly what I was looking for without having to write any code. THIS IS THE FUTURE!
Check out the working example here:
https://mst2.webflow.io/test