Navbar Animation with Moving Hover Effect

byCodingFlicks -September 05, 2020

0

Hello, and welcome back, friends. Navigation menu is an important element on a website. Through this, users can access different sections or pages of the site very quickly. Traditional static navbar menu items can be added with stunning hover animations via HTML, CSS and JavaScript. As a result the acceptance of that website increases manifold to the visitors. Today we will create a snippet based on Navbar Animation with a moving hover effect. We will use plain HTML, CSS, and javascript to do this project. Basically, what we will create is whenever someone hovers over a nav element, we will get a moving hover animation on that particular nav item. The video tutorial below shows how to create this JavaScript animation snippet. You can watch the full video tutorial if you want.

Video Tutorial:

This crucial website element is usually found as a vertical list at the top or side of the page. An ideal or well-designed navigation menu helps a user to easily explore a website without feeling lost. A navigation menu helps to decrease user frustration, decrease bounce rates, and ultimately, add potential customers in any business.

Moreover, the navigation menu is an important element to improve the SEO of the site and is visible in the Google search engine results. If we add hover animation or javascript animation to navigation menu items it will affect user behavior. They will feel that the site is more intuitive, and responsive. We should remember that animations or JavaScript animations also contribute to the overall aesthetics and professionalism of a website. It makes a website visually appealing, more polished and modern.

You May Also Like:

Navbar Animation with Moving Hover Effect [ Source Code ]:

For the creation of this snippet, we have to produce two different files. The Initial one is the HTML File, the second one is the CSS file. You can create a seperate JS file if you want and put the javascript code in there. 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. If you want you can download the entire code from the download button button below.

HTML

  <!DOCTYPE html>
<html lang="en">
<!-- codingflicks.com -->	
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Navbar Animation with Moving Hover Effect</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <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>


    <script>

		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');
			});
		});        

    </script>
</body>
</html>

CSS

  * {
	padding: 0; 
	margin: 0;
}
body {
	font-family: lato;
	background: #262626;
}
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: #fff;
	padding: 10px 35px;
	display: inline-block;
}
header .menu-area ul li a:hover {
	color: #fff;
}
header .menu-area .ani1 {
	position: absolute;
	background: linear-gradient(to right, #c0392b, #8e44ad);
	z-index: -1;
	transition: .3s ease left, width, opacity;
	opacity: 0;
	border-radius: 50px;
}
header .menu-area .ani1.active {
	opacity: 1;
	color: #fff;
}

We hope you have got got the code. We hope it helps. If you want more codes about CSS Animation, Responsive Web Design, JavaScript Animation, etc you can click the load more on our homepage. Please follow this blog on our Twitter and Facebook Group to stay updated for the future posts. Thank you for visitng our website.

DOWNLOAD CODE

Please do not enter any spam link in the comment box.