Menu Hover with CSS Animation

byCodingFlicks -September 04, 2020

0

The navigation menu is an essential part of any website. When visitors click on menu links, they are helped to navigate the site. Navbar in HTML or HTML Navbar is a webpage section located at the top of a page of that website. It links important sections or pages like About, Services, Blog, Contact, etc. Animating the menu of a navbar in HTML using CSS can greatly enhance the user experience on a website. Today we will learn how to create a simple menu hover using CSS animation. We will use some basic CSS styling with CSS transition. You can watch the following video tutorial on CSS Menu hover Animation.

Video Tutorial:

We will use plain HTML and CSS to design this project. In the HTML part, we will take a div element with a class name "menu-area." Then, we will put five nav elements inside an unordered list. Now, we will create it so that when someone hovers over the menu's nav items, a "third bracket" like border animation will happen.

For creating this Navbar in HTML or HTML Navbar, we will use Poppins as the principal font, and you can use whatever fonts you want in CSS. First, we will discard the default padding and margin of the document by a margin and padding of 0 to the body element. Then I set the pink background color to the body and set the height to 100vh. We used the absolute position and the "transform" property to center the menu. We used before and after pseudo-elements to design the menu and used CSS animation to get the required effect.

You may also like:

Menu Hover with CSS Animation [ Source Code ]:

To create this navbar html or html navbar hover animation snippet, we need to create two separate files. The primary one is the HTML file and the other is the CSS file You need to copy and paste the HTML and CSS code given below into the appropriate files and save them. After that, run the project in your browser and make changes as per your need. You can download the entire code from the download button below this blog post.

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>CSS Menu Hover Animation</title>
	<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,700;1,100;1,200;1,300&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="menu-area">
		<ul>
			<li>
				<a href="">Home</a>
			</li>
			<li>
				<a href="">About</a>
			</li>
			<li>
				<a href="">Services</a>
			</li>
			<li>
				<a href="">Portfolio</a>
			</li>
			<li>
				<a href="">Contact</a>
			</li>
		</ul>
	</div>
</body>
</html>

CSS:

  body {
	margin: 0;
	padding: 0;
	font-family: "Poppins", sans-serif;
	height: 100vh;
    background: linear-gradient(to right, #7f00ff, #e100ff);
}
.menu-area {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.menu-area ul {
	padding: 0;
	display: flex;
	float: right;
}
.menu-area ul li {
	list-style-type: none;
	padding: 10px 30px;
}
.menu-area ul li a {
	text-decoration: none;
	text-transform: uppercase;
	font-size: 35px;
	color: #fff;
	position: relative;
	font-weight: bold;
}
.menu-area ul li:hover a {
	color: #fff;
}
.menu-area ul li a:before {
	content: '[';
	position: absolute;
	left: 0;
	opacity: 0;
	transition: .6s;
	color: white;
}
.menu-area ul li a:after {
	content: ']';
	position: absolute;
	right: 0;
	opacity: 0;
	transition: .6s;
	color: white;
}
.menu-area ul li:hover a:before {
	left: -25px;
	opacity: 1;
}
.menu-area ul li:hover a:after {
	right: -25px;
	opacity: 1;
}

A navigation bar is an essential part of any kind of website. So it is necessary to present the HTML navigation well among the visitors. If we can add beautiful CSS animations on hover it will not only help to draw attention to the navigation elements but also give the website a modern and professional look. We hope you have collected the source code. For more, please click the load more button on our homepage. Follow this blog on our Twitter and Facebook Groups to stay updated for future posts. Thanks for visiting our website.

DOWNLOAD CODE

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