You may have seen the hover animation navigation menu on websites when the pointer is moved to any menu link. If you are looking for a quick and easy way to create this Underline hover animated menu, this blog is for you.
But before continuing this blog, If you haven’t read my previous article about how to create a Login & Registration Form in HTML CSS, be sure to check it out. I hope it will improve your HTML and CSS skills.
In this blog, you’ll learn how to create Navigation Menu Hover Animation in HTML & CSS. Hover animations like these are commonly used on websites. Even if you only know the basics of HTML and CSS, you can still use them to create Navigation Menu Hover Animation.
Navigation hover animation is the term for the animation that shows when a user hovers over a navigation link. In essence, these animations provide the impression that we have clicked or hovered over them.
Have a look at the given preview of my animated navigation as you can see there are some navigation links and you are seeing only one underline under the navigation links
If you want to create this Navigation Hover Animation Menu step-by-step with me, you can check out the video tutorial that I have provided below. I have explained all the HTML and CSS code that I used.
Navigation Menu Hover Animation | Video Tutorial
All of the HTML and CSS code that I used to create this hover animation is provided. Instead of duplicating the code or downloading the source code file, I strongly advise you to watch the full video explanation of this Navigation Menu Hover Animation. By watching the video tutorial, you will be able to create this Navigation Menu Hover Animation.
As you have seen all the navigation menu bar hover animations and effects using HTML and CSS in this video tutorial. At first, we only saw navigation links, but when I moved the cursor over the menu links, beautiful and distinct underlined animations appeared smoothly.
I hope now you can create this Navigation Menu Hover Animation in HTML and CSS. If you want to take all the HTML and CSS code that I have used to create these animated menu links then all the source codes are given below.
You May Like This:
Menu Hover Animation [Source Codes]
- Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
- Create an
index.htmlfile. The file name must be index and its extension .html - Create a
style.cssfile. The file name must be style and its extension .css
Once you create these files, paste the given codes into the specified files. If you don’t want to do these then scroll down and download the Navigation Menu Hover Animation by clicking on the given download button.
First, paste the following codes into your index.html file.
<!DOCTYPE html>
<!-- Coding By CodingNepal - codingnepalweb.com -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> Navigation Bar Hover Animation </title>
<!---Custom Css File!--->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
</div>
</body>
</html>
Second, paste the following codes into your style.css file.
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
.container{
width: 100%;
height: 100vh;
background: #2192ff;
display: flex;
align-items: center;
justify-content: center;
}
nav{
background: #fff;
border-radius: 9px;
padding: 30px;
box-shadow: 0 5px 20px rgba(0,0,0,0.4);
}
nav ul li{
display: inline-block;
list-style: none;
font-size: 2rem;
padding: 0 10px;
margin: 0 20px;
cursor: pointer;
position: relative;
}
nav ul li:after{
content: '';
width: 0;
height: 3px;
background: #2192ff;
position: absolute;
left: 0;
bottom: -10px;
transition: 0.5s;
}
nav ul li:hover::after{
width:100%;
}
If you face any difficulties while creating your Navbar Hover Animation or your code is not working as expected, you can download the source code files for this Navigation Menu Bar Hover Animation for free by clicking on the download button, and you can also view a live demo of this card slider by clicking on the view live button.
