This blog explains How to Animate Navigation Menus With HTML and CSS. On many sites, navigation links feature hover animations, which notify the visitor that their cursor is hovering over a particular link. You do not need to be a pro; with just a little understanding of CSS and HTML, you can use these animations effortlessly.
If you have observed how some websites animate their menu links on hover, then this blog will show you how to create an Underline hover animated menu step by step.
In this post, I am going to show you how to create a Navigation Menu Hover Animation using only HTML and CSS. Such animation makes it look as if the website is responding to the visitor’s action, in this case, hovering a mouse cursor over a link, which provides pleasant feelings for the user and improves the overall interaction with the application.
What You’ll Learn:
- How to structure the Animate Navigation Bar with HTML
- How to style the Animate Navigation Bar using CSS
Step 1: Structure the Navigation Bar with HTML
Start by creating a new file called (index.html). Then, copy and paste the HTML code provided into this file. Remember to save it with the (.html) extension.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Navigation Menu with Hover Animation</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<nav>
<ul class="nav-menu">
<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>
</nav>
</body>
</html>
Step 2: Styling the Animate Navigation Bar with CSS
Create a new file called (style.css) and copy the provided code into this file. Don’t forget to save it with the (.css) extension.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
nav {
background-color: #333;
}
.nav-menu {
list-style: none;
display: flex;
justify-content: center;
padding: 20px;
}
.nav-menu li {
margin: 0 15px;
}
.nav-menu a {
text-decoration: none;
color: white;
padding: 10px 15px;
position: relative;
transition: color 0.3s ease;
}
.nav-menu a::after {
content: '';
position: absolute;
left: 50%;
bottom: 0;
width: 0;
height: 2px;
background-color: #fff;
transition: width 0.3s ease, left 0.3s ease;
}
.nav-menu a:hover {
color: #ff6347; /* Change text color on hover */
}
.nav-menu a:hover::after {
width: 100%;
left: 0;
}
Final Conclusion
I’m excited for you to create your own Navigation Menu Hover Animation with HTML and CSS! If you want to grab all the code I used for these animated menu links, you can find it below.
Check out the preview of my animated navigation menu. You’ll see that when you hover over the links, a single underline appears beneath them.
If you’d like to follow along and build this Navigation Hover Animation Menu step-by-step, be sure to watch the video tutorial I’ve included below. I walk you through all the HTML and CSS code in detail. Have fun!
Happy Coding!
