Css nav link hover

Create Navigation Menu Hover Animation in HTML CSS

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]

1. Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
2. Create an index.html file. The file name must be index and its extension .html
3. Create a style.css file. 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.

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

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.

Источник

Better UX CSS Hover Navigation

The CSS hover based drop down nav has been a common option when organizing our website’s navigation. Simple and easy to build with decent user experience the drop down can seem like reasonable choice. With a small bit of JavaScript we can also get good touch support. Often though when using hover effects to open drop downs users run into something like this:

The user saw the bottom link in the sub nav and tried to click it. Because our nav displays on hover, when the cursor leaves the element the hover is no longer applied. This in turn the causes our nav to no longer display. Using Pseudo-elements and CSS transforms we can create additional elements to allow the hover area to be larger. Doing this creates a buffer area that will allow the user’s mouse to veer off of the menu. So we will have something like this:

Below is a snippet example from our demo of how this would look.

// Don't worry to much about the details but just look and see how we are using
// the :after selector to create a new Pseudo-element.

// Sub nav that is displayed when a nav button is hovered
.nav__sub-nav__btn.has-sub-nav:after  
content: ''; 
display: none; 
width: 68px; 
height: 139px; 
position: absolute; 
right: -19px; 
top: 4px; 
transform: rotate(-41deg); 
z-index: 99;
>

// On hover of our nav we show our Pseudo-element that we created above.
.has-sub-nav:hover:after  
display: block;
>

// On hover of our extra Pseudo-element we show the sub nav
.has-sub-nav:after:hover > .nav__sub-nav  
display: block; 
top: 0; 
left: 238px; 
z-index: 100;
>

The extra element allows our hover state to continue while the user moves their mouse outside of the parent menu button. Using z-index we place our new element between the nav and the sub nav to get the final result:

This is not a perfect solution. There is still a chance of the users mouse venturing out too far but this does provide a better user experience with only a little more code. Check out a full working demo on Codepen below with included JavaScript for touch support.

Web Component Essentials

Save development time, improve product consistency and ship everywhere. With this new Course and E-Book learn how to build UI components that work in any JavaScript framework such as Angular, Vue, React, and more!

Web Component Essentials

Reusable UI Components for all your Web Applications

Источник

8 Amazing Navbar Link Hover Effect With CSS

Hey everyone. Welcome to today’s tutorial. In this tutorial, I present to you 8 amazing navbar link hover effect. These hover effects are assured to make your website attractive. Apart from making the website attractive, the hover effects will also help the user quickly target the link they are looking for on the navigation menu.

All these beautiful hover effects are created with HTML and Pure CSS. They are super easy and quick to create. You can even download the source code for these hover effects. For that all you have to do is go to the homepage. Click on the search button. Type the name of the effect. Then select the effect of your choice and click on the download button.

If you like this compilation of tutorials, you can check out other tutorials on my youtube channel. I post new tips, tricks and tutorials on my youtube channel regularly. So don’t forget to subscribe to my youtube channel so you don’t miss any of this awesome stuff.

Let us take a look at these link hover effects one by one. Don’t forget to comment below which among these you liked the most.

1. Cool Navbar Link Hover Effect:

2. Rotating Words Link Hover Effect:

3. Underline & Overline Link Hover Effect:

4. Slide Up Link Hover Effect:

5. Gradient Underline Link Hover Effect:

6. Wiggly Navbar Link Hover Effect:

7. Draw Underline Link Hover Effect:

8. Fill In Link Hover Effect:

That’s it for this tutorial. If you have any queries, suggestions or feedback you can comment below.
Happy Coding!

Источник

Navigation Menu Hover Animation in HTML and CSS

Hello friends, I hope you all doing well, today we will create all-important and mostly used hover animations for any type of navigation. As you already know that I have created various types of Responsive Navigation Bar and this type of tiny animation and effect makes our design far better right?

The animation that appears while hovering in the navigation links is known as navigation hover animation. Basically, these types of animation feel us that we have clicked or hovered on them.

As you can see on the given image of our program [all navigation menu hover animation], I know you are seeing only one underline under the navigation links and off course if is active for or hovered form. Basically, there are different types of menu animation on hover.

Let’s watch all the hover animation that I have built in this program[Navigation Menu Hover Animation], and one thing after watching the following video tutorial you will not see the demo of these hover animations, you will also know all code that I have used to create this hover animation and effect.

Navigation Menu Hover Animation in HTML and CSS

I have provided all source code of this all navigation menu hover animations and effects below, but before jumping on the source code files, I would like to cover some important points that you should know.

As you have seen on the video tutorial of all navigation menu bar hover animation and effect using HTML and CSS. At first, we have seen only navigation links, and when I did hover on those every navigation link’s beautiful and different underline animations appear with smooth animation.

In those first, second, and third navigation links I have given position absolute and that underline width increases while we hover on them. On the last navigation link, I have given width 100% and scaleX 0 and transform-origin right, and while we do hover I have given transform scaleX 1 and transform-origin right that’s why it moves forward.

I believe you have got all the ideas and tactics that I have used on this program [Navigation Menu Hover Animation in HTML and CSS] and you can build this type of animation easily but hose friends who are feeling difficult to make this, you can get all the source code of this hover animations from below.

You Might Like This:

Navigation Menu Hover Animation [Source Code]

Before copying the given code of Navigation Menu Hover Animation and Effects you need to create two files: an HTML file and a CSS file. After Creating these two files then you can copy-paste the following codes in your documents.

/* Google Fonts Import Link */ @import url(‘https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap’); * < margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; >body < height: 100vh; display: flex; align-items: center; justify-content: center; background: #c1f7f5; >.nav-links < display: flex; align-items: center; background: #fff; padding: 20px 15px; border-radius: 12px; box-shadow: 0 5px 10px rgba(0,0,0,0.2); >.nav-links li < list-style: none; margin: 0 12px; >.nav-links li a < position: relative; color: #333; font-size: 20px; font-weight: 500; padding: 6px 0; text-decoration: none; >.nav-links li a:before < content: ''; position: absolute; bottom: 0; left: 0; height: 3px; width: 0%; background: #34efdf; border-radius: 12px; transition: all 0.4s ease; >.nav-links li a:hover:before < width: 100%; >.nav-links li.center a:before < left: 50%; transform: translateX(-50%); >.nav-links li.upward a:before < width: 100%; bottom: -5px; opacity: 0; >.nav-links li.upward a:hover:before < bottom: 0px; opacity: 1; >.nav-links li.forward a:before < width: 100%; transform: scaleX(0); transform-origin: right; transition: transform 0.4s ease; >.nav-links li.forward a:hover:before

If you face any difficulties while creating your Navigation Menu Hover Animation or your code is not working as expected, you can download the source code files for this Navbar Menu 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.

Источник