Navbar Animation with Moving Hover Effect

Hello, and welcome back, friends. Today we will create a snippet based on Navbar Animation with a moving hover effect. Previously I shared a snippet on Image Hover CSS Animation with Caption Overlay. Check that one if you haven't already. We will use plain HTML, CSS, and javascript to do this project. Basically, what we will create is whenever someone hovers over any nav element, then we will get a moving hover animation on that particular nav item.


For the creation of this snippet, we have to produce three different files. The Initial one is the HTML File, the second one is the CSS file, and the last one is the js file. You need to copy the HTML, CSS, and js code given below and paste them to the appropriate files and save them. After that, run the project in your browser and modify according to your need.

HTML

<header> <div class="menu-area"> <div class="ani1"> </div> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Services</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Contact</a></li> </ul> </div> </header>


CSS

* { padding: 0; margin: 0; } body { font-family: lato; background: orange; } header { width: 100%; height: auto; margin: 20% auto; display: flex; justify-content: center; align-items: center; } header .menu-area { display: flex; justify-content: center; align-items: center; margin-top: 20px; height: auto; width: auto; } header .menu-area ul { display: flex; justify-content: center; align-items: center; } header .menu-area ul li { list-style: none; height: auto; width: auto; } header .menu-area ul li a { text-decoration: none; font-size: 2rem; color: black; padding: 10px 35px; display: inline-block; } header .menu-area ul li a:hover{ color: #fff; } header .menu-area .ani1 { position: absolute; background-color: black; z-index: -1; transition: .3s ease left, width, opacity; opacity: 0; border-radius: 50px; } header .menu-area .ani1.active { opacity: 1; color: #fff; }


JS:

const ani1 = document.querySelector('header .menu-area .ani1'); const ani2 = document.querySelectorAll('header .menu-area ul li'); console.log(ani2); ani2.forEach((list) => { list.addEventListener('mouseover', () => { let position = list.getBoundingClientRect(); ani1.classList.add('active'); ani1.style.left = position.x + 'px'; ani1.style.top = position.y + 'px'; ani1.style.height = position.height + 'px'; ani1.style.width = position.width + 'px'; }); list.addEventListener('mouseout', () => { ani1.classList.remove('active'); }); });

I hope you like this tutorial. I hope it helps. Please follow this blog on our Twitter and Facebook Group to stay updated for the future posts.