Navbar Hover Effects css|Navbar Underline Hover Effect

In this post, we will learn how to create a menu with hover effects using html and css. when the mouse hover on each menu show underlines animation from left to right. The whole process is performed under the CSS “transform scale property” and pseudo elements. This article is written keeping in mind that most of the new students are not able to create menu hover effects.

HTML Structure for Navbar:

Let’s start with the basic HTML structure for our menu. This is a simple unordered list (<ul>) with list items (<li>) that contain anchor tags (<a>). Each anchor tag represents a menu item.

<ul>
 <li><a href="#">Home</a></li>
 <li><a href="#">About Us</a></li>
 <li><a href="#">Our Services</a></li>
 <li><a href="#">Privacy Policy</a></li>
 <li><a href="#">Contact</a></li>
</ul>

CSS Styling For Navbar

Now, onto the fun part – the CSS. We’ll break down the CSS code into sections and explain each part:

First off, we’re setting a background color for the body of the page. Simple enough, right?. Next, we’re styling the unordered list. We set a background color, display property, margin, padding, border-radius, and width. The display: table; property is used to center the list in the middle of the page.

body{
 background: #9F7B7B;
}
ul {
 background: #010101;
 display: table;
 margin: 80px auto;
 padding: 10px 20px;
 border-radius: 8px;
 width: 70%;
}

Output:

Navbar Align Item in Row

Moving on, we’re styling the list items. We remove the default bullet points with list-style: none;, display the items in a line with display: inline-block;, and add some space between the items with margin-left.

ul li {
 list-style: none;
 display: inline-block;
 margin-left: 50px;
}

Now, we’re styling the anchor tags. We set the font, color, remove the underline with text-decoration: none;, set the position to relative (this is important for the hover effect), add some padding, set the font size, and display the anchor tags as block elements.

ul li a {
 font-family: arial;
 color: #8BE3F3;
 text-decoration: none;
 position: relative;
 padding: 15px 10px;
 font-size: 18px;
 display: block;
}

Output:

Adding Underline on Navbar menu

Here’s where the magic happens. We’re using a pseudo-element ::after to create the underline. We set the position to absolute, which is why we needed the position of the anchor tags to be relative. We set the width to 100% and the height to 4px, which will be the height of the underline. We set the background color of the underline and initially scale it to 0 on the x-axis with transform: scaleX(0);. The transform-origin: bottom right; means the scaling effect will start from the bottom right.

ul li a::after {
 content: '';
 position: absolute;
 left: 0px;
 bottom: 0px;
 width: 100%;
 height: 4px;
 background-color: #FEFEFE;
 transform-origin: bottom right;
 transition: transform 0.5s ease;
 transform: scaleX(0);
}

Adding Underline Hover Effect on Navbar Menu

Finally, we define what happens when we hover over the anchor tags. We change the transform-origin to the bottom left and scale the underline back to its original size with transform: scaleX(1);. This creates the animation effect from left to right.

ul a:hover::after {
 transform-origin: bottom left;
 transform: scaleX(1);
}

Output:

We certainly hope that you’ve found this post both insightful and practical. We’ve strived to deliver detailed, user-friendly content that will assist you in mastering it. Should you have any further questions, curiosities, or if there’s anything you’re unsure about, please don’t hesitate to drop a comment. Your engagement is extremely valuable to us and our community. We promise to read every single comment and respond as soon as we can. It’s our aim to make sure you’re never left hanging with a question, as we’re more than eager to assist you in broadening your knowledge.