Header Underline Active Item Using CSS and jQuery | Indicate Active Link

How we can create an active link indicator effect for the header and nav section? Solution: See this Header Underline Active Item Using CSS and jQuery, Indicate Active Link.

Earlier I have shared an active tab animation program, this is similar to that but it for header items. Basically, the header section contains navigation, logo, search box, etc on a website. And HTML has a specific tag <header> to creating the header section, it also helps search engines to detect the header part. In this program, the header section contains navigation and the program is for underline the active nav item.

Today you will learn to create an Indicate Active Link program. Basically, there is a dummy text for LOGO and 5 navigation items or links. Below the navigation items, there is a light color line with the first item to last item placement. But the selected or active nav link has a blue underline, it helps to detect the currently active link. When you will click on another link then the blue underline will go and active that selected nav item. Also, the hover effect is similar, on hover the hovered item’s underline will blue and all other items will fade.

So, Today I am sharing Header Underline Active Item Using CSS and jQuery. There I have used CSS for styling and other effects, and jQuery for implement those styles and effects according to the action. This program is short and basic, you will easily learn and created. If you are a beginner, then you can use this program on your website otherwise, you can customize it to creating better.

If you are thinking now how this active header underline effect actually is, then see the preview given below.

Preview Of Indicate Active Link for Nav

See this video preview to getting an idea of how this program looks like.

Now you can see this visually, also you can see it live by pressing the button given above. If you like this, then get the source code of its.

You May Also Like:

• jQuery UI Tabs 
• Login and Registration Form
• 3D Progress Bar Animation
• Corner Expand Menu

Header Underline Active Item Using CSS and jQuery Source Code

Before sharing source code, let’s talk about it. First I have created a header section using HTML <header> tag and placed a hyperlink tag for LOGO and a nav section inside it. Inside the <nav> tag I have placed a list using HTML <ul> & <li> tags. Each list item contains a hyperlink tag with text which for navigation links and items.

Now using CSS I have placed all the items in the right place, as you can see in the preview. With CSS first I gave basic values to the elements like size, position, margin, padding, etc. There I have used flex display ( display: flex; ) command to create the layout. Also, I have created the hover effect and :after  command to creating the active link effect.

jQuery handling here the active effect add and remove from links according to action. First, it fetched elements using document.querySelectorAll command and used .classList command to adding and remove the active class. Left all other things you will understand after getting the codes, I can’t explain all in writing.

For creating this program you have to create 3 files. First file for HTML, second for CSS, and the third file for JavaScript. Follow the steps to creating this program without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given below.

style.css

Now create a CSS file named ‘style.css‘ and put these codes given here.

function.js

The final step, create a JavaScript file named ‘function.js‘ and put the codes.

That’s It. Now you have successfully created Header Underline Active Item Using CSS and jQuery, Indicate Active Link program. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.