Navbar Menu Hover Effect using CSS

Hello friends. Today we will share with you a short snippet of CSS animation. The navigation menu is very important for a website. When a visitor comes to a website, the navigation menu will direct him to any part of the website. How nice it would be if we could give an animation in this navigation menu. Therefore, we will implement a nice hover animation to a navigation menu. Take a look at the video tutorial below before collecting the code. The tutorial will help you to understand your code. We have over 1000 videos of front-end development on our YouTube channel. If you want to see CSS animation examples, HTML CSS, javascript related videos then subscribe to our youtube channel and press the bell icon next to it so that you can get notifications of new videos.

I hope you have watched the video and understood how this menu hover animation was created with HTML and CSS only. So what do we mean by navigation menu? The navigation bar or navigation menu on a website is a sorted list of links. With the help of these links, a visitor can quickly access the most useful pages of a website. Navigation menus are usually found in the header section of each website.

In the HTML part of the project, we have added an unordered list element and nav elements to it. At the beginning of the CSS section, we removed the default margin and padding of the project. Then I used position absolute and CSS transform property to bring ul element in the middle of the viewport. Then I used the display inline-block to bring the li elements together. Then I give the anchor tags a position relative value because each element will have a hove animation.

Then I set a transform value in the pseudo-element of the region tag for the animation of the hover. Here we set the height and width of the element that will emerge from the back. It is then given a cubic-bezier transition. Initially, the rotate and scale value will be 0. If you hover over the menu, the rotate value will be 160deg and, the scale value will be 1.2.

You May Also Like:

Navbar Menu Hover Effect using CSS [ Source Code ]:

You need to have two files ready to create the project. One of them is HTML and, the other is CSS. Then copy and paste the following code into your project.

ADD HTML

<!DOCTYPE html>
<html lang="en">
<!--divinectorweb.com-->
<head>
	<meta charset="UTF-8">
	<title>CSS Creative Menu Hover Effects | CSS Animation Examples</title>
	<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap" rel="stylesheet">
	<link href="style.css" rel="stylesheet">
</head>
<body>
	<ul>
		<li>
			<a href="#">Home</a>
		</li>
		<li>
			<a href="#">About</a>
		</li>
		<li>
			<a href="#">work</a>
		</li>
		<li>
			<a href="#">blog</a>
		</li>
		<li>
			<a href="#">contact</a>
		</li>
	</ul>
</body>
</html>

ADD CSS:

* {
	margin: 0;
	padding: 0;
}
body {
	background: #f5d71a;
	font-family: 'Poppins', sans-serif;
}
ul {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 80%;
	text-align: center;
	padding: 20px;
}
ul li {
	display: inline-block;
	list-style: none;
	margin: 5px;
	padding: 10px 40px;
}
ul li a {
	text-decoration: none;
	text-transform: uppercase;
	font-size: 35px;
	color: #262626;
	position: relative;
	transition: all 0.5s ease;
	font-weight: 700;
}
ul li a:after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100px;
	height: 40px;
	background: #262626;
	transform-style: preserve-3d;
	transform: translate(-50%, -50%) rotate(0deg) scale(0);
	transition: all 1.5s cubic-bezier(.43, 1.91, .351, .74);
	z-index: -1;
	border-radius: 0 50px;
}
ul li:hover a:after {
	transform: translate(-50%, -50%) rotate(160deg) scale(1.2);
}
ul li:hover a {
	color: #fff;
	text-shadow: 0 2px 20px rgba(0, 0, 0, 0.9);
}

Hopefully, you have implemented the code correctly. Visit our blog regularly to get this kind of code. Please share our blog articles on various social media. Learn for yourself and help others learn. Thanks for visiting our blog.

Navbar Menu Hover Effect using CSS [ Source Code ]:

Post a Comment

Post a Comment

About Us

Contact Form

Navbar Menu Hover Effect using CSS

Navbar Menu Hover Effect using CSS [ Source Code ]:

You might like

Post a Comment

Post a Comment

Contact Form