highlight current page

How we can highlight the current page, menu, or link? We can do this with HTML CSS & JavaScript. Check Out This Highlight Current Page With HTML CSS JS, Show Active Link Or Menu.

I am sure that, You have seen underline on the current menu or page on mostly all websites. When we click on any websites about then an underline appears on about menu‘s bottom section. On some websites has any special effect to indicate the current opened menu or link.

Today you will learn how to show the active link, page, or menu with an underline. You can do this using HTML, CSS, & JavaScript, After learning this you can use it everywhere like on your website or blog. Just you have to change class and id values on your navbar then your website’s menu will be like this.

So, Today I am sharing Highlight Current Page With HTML CSS JavaScript. In other words, Show active link, menu, or page.  This program is pure JavaScript based program, I did not use any library. Its is a tricky program, But if you have the capability to understand the code then you will get it. Otherwise, just copy the codes and change as you want.

If you are thinking now how this active link highlighter actually is, Then see the preview given below.

Preview Of Show Active Link Menu & Page

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

Now you can see this visually. If you like this one then get the source code of its.

You May Also Like:

Discussion About Active Link Indicator

Before sharing source code, Let’s talk about it. I created two sections one for creating a menu and other section for its page.  I gave id on pages and add the id on menu’s action. For example, I put home pages ID is id= "home-id" and put on Home menu < a href="#home-id"> . Now when you click home on the menu section then its automatically navigate to the home page.

I used HTML Data attribute, The data-* attributes gives us the ability to embed custom data attributes on all HTML elements (more Info). In the menu section, we store data and give unique data id to every menu using data-tab-*. I created 7 menus I put A to G in data-tab, For example, data-tab-A for the first menu and data-tab-B for the second menu.

Now in the page section, I used data attribute with data-tab-panel valueIn this section, I also used A to G alphabets. Then I choose the home menu and page to active by default by putting data-active-tab="A".  In the CSS section, I put a line for a separate menu and pages. Between the menu and page section, I put the underline effect to create the highlight.

I put a span with 3px height with a color, It’s width is decided according to the menu’s words length using JavaScript. In the main section, I put overflow-x: scroll; and overflow-y: hidden; values, creating a scroll effect. Also I put .main-options::-webkit-scrollbar { display: none; } to hide scroll bar.

In JavaScript Section, I put all controls of styling. I created variable for each section, Then it’s changed according to the environment. I create a loop to check the width of the menu’s words length and change it dynamically. There are many more commands, I can’t explain it in writing, After getting the codes you will understand automatically.

Highlight Current Page With HTML CSS JavaScript Source Code

For Creating This Program You Have to Create 3 files. First for HTML, second for CSS, and third for JavaScript. Follow the steps to creating this 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.

function.js

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

That’s It. Now you have successfully created Highlight Current Page Program With HTML CSS JavaScript ( JS ), Show Active Link, Menu, and Page. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.

10 COMMENTS

  1. Where do you learn all this?
    You don’t seem too old to be highly experienced.
    Its too complicated to understand.

    • Bro, I am doing a part-time job in web developer position. Daily I face a new challenge and after that, I post here the solution.

  2. I guess this works but you could also just give a class (eg. “active”) to the menu item you clicked, and remove that class from all siblings. That’s like 4 lines of code with Jquery.

  3. Nice solution.
    Just wondering though why it does not work if the line is placed between the .. tags which is the usual standard.

LEAVE A REPLY

Please enter your comment!
Please enter your name here