Home Web Development JavaScript Highlight Current Page With HTML CSS JS | Show Active Link Or...

Highlight Current Page With HTML CSS JS | Show Active Link Or Menu

June 15, 2019

21818

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.

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 value. In 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.

<!DOCTYPE html>
<!-- code by webdevtrick ( https://webdevtrick.com) -->
<html>
<head>
  <meta charset="UTF-8">
  <title>Active Link Indicator | Webdevtrick.com</title>
  <link href="https://fonts.googleapis.com/css?family=Righteous&display=swap" rel="stylesheet">
      <link rel="stylesheet" href="style.css">
  
</head>

<body>

<section class="main-section" data-active-tab="A">
	
  <div class="main-options">
    
    <nav class="menus">
      <a href="#home" class="menus-link" data-tab="A"><span>Home</span></a>
      <a href="#about" class="menus-link" data-tab="B"><span>About</span></a>
      <a href="#services" class="menus-link" data-tab="C"><span>Services</span></a>
      <a href="#portfolio" class="menus-link" data-tab="D"><span>Portfolio</span></a>
      <a href="#contact" class="menus-link" data-tab="E"><span>Contact</span></a>
      <a href="#faq" class="menus-link" data-tab="F"><span>FAQ</span></a>
      <a href="#donate" class="menus-link" data-tab="G"><span>Donate</span></a>
      <span class="undr-line"></span>
    </nav>
  </div>
	
  <div class="section-list">
    <div class="sections" id="home" data-tab-panel="A">Home Section</div>
    <div class="sections" id="about" data-tab-panel="B">About Section</div>
    <div class="sections" id="services" data-tab-panel="C">Services Section</div>
    <div class="sections" id="portfolio" data-tab-panel="D">Portfolio Section</div>
    <div class="sections" id="contact" data-tab-panel="E">Contact Section</div>
    <div class="sections" id="faq" data-tab-panel="F">FAQ Section</div>
    <div class="sections" id="donate" data-tab-panel="G">Donate Section</div>
  </div>
</section>
 
    <script  src="function.js"></script>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Active Link Indicator | Webdevtrick.com</title>

</head>

<body>

<a href="#about" class="menus-link" data-tab="B"><span>About</span></a>

<a href="#services" class="menus-link" data-tab="C"><span>Services</span></a>

<a href="#portfolio" class="menus-link" data-tab="D"><span>Portfolio</span></a>

<a href="#contact" class="menus-link" data-tab="E"><span>Contact</span></a>

<a href="#donate" class="menus-link" data-tab="G"><span>Donate</span></a>

</nav>

</div>

<div class="sections" id="home" data-tab-panel="A">Home Section</div>

<div class="sections" id="about" data-tab-panel="B">About Section</div>

<div class="sections" id="services" data-tab-panel="C">Services Section</div>

<div class="sections" id="portfolio" data-tab-panel="D">Portfolio Section</div>

<div class="sections" id="contact" data-tab-panel="E">Contact Section</div>

<div class="sections" id="faq" data-tab-panel="F">FAQ Section</div>

<div class="sections" id="donate" data-tab-panel="G">Donate Section</div>

</div>

</section>

</body>

</html>

style.css

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

/** code by webdevtrick ( https://webdevtrick.com) **/
body {
  box-sizing: border-box;
  background-color: #F0F0F0;
  height: 100vh;
  overflow: hidden;
  padding-top: 100px;
  text-rendering: optimizeLegibility;
  font-smoothing: antialiased;
  font-family: 'Righteous', cursive;
 
}

.main-section {
  width: 100%;
  text-align: center;
}

.menus {
  position: relative; 
  border-bottom: 1px solid #555;
}

.menus .menus-link {
    display: inline-block;
    margin: 0 16px;
    text-decoration: none;
    font-size: 20px;
    line-height: calc(11px * 4);
    color: #333;
    text-transform: uppercase;
  }

.menus .menus-link span {
      font-size: inherit;
      line-height: inherit;
      letter-spacing: 1px;
    }

.menus .undr-line {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100px;
    height: 5px;
    background-color: #FF4245;
    transition-property: transform, left, background-color;
    transition-duration: .2s;
    transform-origin: 0;
    transform: translate3d(0, 0, 0) scaleX(0);
    opacity: 0;
    animation: myanim .2s forwards;
    animation-delay: .2s;
  }

.sections {
  padding: 40px;
  font-size: 26px;
  color: #545454;
  text-transform: uppercase;
  letter-spacing: 1px;
  display: none;
}

.main-options {
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
}

.main-options::-webkit-scrollbar {
    display: none;
    height: 0;
    background-color: transparent;
  }

@keyframes myanim {
  to {
    opacity: 1;
  }
}

/** code by webdevtrick ( https://webdevtrick.com) **/

body {

box-sizing: border-box;

background-color: #F0F0F0;

height: 100vh;

overflow: hidden;

padding-top: 100px;

text-rendering: optimizeLegibility;

font-smoothing: antialiased;

font-family: 'Righteous', cursive;

}

.main-section {

width: 100%;

text-align: center;

}

.menus {

position: relative;

border-bottom: 1px solid #555;

}

.menus .menus-link {

display: inline-block;

margin: 0 16px;

text-decoration: none;

font-size: 20px;

line-height: calc(11px * 4);

color: #333;

text-transform: uppercase;

}

.menus .menus-link span {

font-size: inherit;

line-height: inherit;

letter-spacing: 1px;

}

.menus .undr-line {

position: absolute;

bottom: 0;

left: 0;

width: 100px;

height: 5px;

background-color: #FF4245;

transition-property: transform, left, background-color;

transition-duration: .2s;

transform-origin: 0;

transform: translate3d(0, 0, 0) scaleX(0);

opacity: 0;

animation: myanim .2s forwards;

animation-delay: .2s;

}

.sections {

padding: 40px;

font-size: 26px;

color: #545454;

text-transform: uppercase;

letter-spacing: 1px;

display: none;

}

.main-options {

overflow-x: scroll;

overflow-y: hidden;

white-space: nowrap;

}

.main-options::-webkit-scrollbar {

display: none;

height: 0;

background-color: transparent;

}

@keyframes myanim {

to {

opacity: 1;

}

function.js

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

/** code by webdevtrick ( https://webdevtrick.com) **/
var tabsModule = document.body.querySelector(".main-section");
var tabNavList = document.body.querySelector(".menus");
var tabNavLinks = document.querySelectorAll(".menus-link");
var tabNavCurrentLinkindicator = tabNavList.querySelector(".undr-line");
var tabPanels = document.querySelectorAll(".sections");

document.getElementById("home").style.display = "block";


function positionIndicator() {
  var tabNavListLeftPosition = tabNavList.getBoundingClientRect().left;
  var tabsModuleSectionDataValue = tabsModule.getAttribute("data-active-tab") || "A";
  var tabNavCurrentLinkText = tabNavList.querySelector("[data-tab='" + tabsModuleSectionDataValue + "'] span");
  var tabNavCurrentLinkTextPosition = tabNavCurrentLinkText.getBoundingClientRect();
  tabNavCurrentLinkindicator.style.transform =
    "translate3d(" +
    (tabNavCurrentLinkTextPosition.left - tabNavListLeftPosition) +
    "px,0,0) scaleX(" +
    tabNavCurrentLinkTextPosition.width * 0.01 +
    ")";
}

positionIndicator();

function hideAllTabPanels() {
  for (i = 0; i < tabPanels.length; i++) {
    tabPanels[i].removeAttribute("style");
  }
};

var tabNavLinkEvent = function() {
  var thisLink = this.getAttribute("data-tab");
  var thisHref = this.getAttribute("href");
  var thisTabPanel = document.querySelector(thisHref);
  tabsModule.setAttribute("data-active-tab", thisLink);
  hideAllTabPanels();
  thisTabPanel.style.display = "block";
  positionIndicator();
};

for (var i = 0; i < tabNavLinks.length; i++) {
  tabNavLinks[i].addEventListener("click", tabNavLinkEvent, false);
}

(function() {
  window.addEventListener("resize", resizeThrottler, false);
  var resizeTimeout;
  function resizeThrottler() {
    if (!resizeTimeout) {
      resizeTimeout = setTimeout(function() {
        resizeTimeout = null;
        actualResizeHandler();
      }, 66);
    }
  }
  function actualResizeHandler() {
    positionIndicator();
  }
})();

/** code by webdevtrick ( https://webdevtrick.com) **/

var tabsModule = document.body.querySelector(".main-section");

var tabNavList = document.body.querySelector(".menus");

var tabNavLinks = document.querySelectorAll(".menus-link");

var tabNavCurrentLinkindicator = tabNavList.querySelector(".undr-line");

var tabPanels = document.querySelectorAll(".sections");

document.getElementById("home").style.display = "block";

function positionIndicator() {

var tabNavListLeftPosition = tabNavList.getBoundingClientRect().left;

var tabsModuleSectionDataValue = tabsModule.getAttribute("data-active-tab") || "A";

var tabNavCurrentLinkText = tabNavList.querySelector("[data-tab='" + tabsModuleSectionDataValue + "'] span");

var tabNavCurrentLinkTextPosition = tabNavCurrentLinkText.getBoundingClientRect();

tabNavCurrentLinkindicator.style.transform =

"translate3d(" +

(tabNavCurrentLinkTextPosition.left - tabNavListLeftPosition) +

"px,0,0) scaleX(" +

tabNavCurrentLinkTextPosition.width * 0.01 +

")";

}

positionIndicator();

function hideAllTabPanels() {

for (i = 0; i < tabPanels.length; i++) {

tabPanels[i].removeAttribute("style");

}

};

var tabNavLinkEvent = function() {

var thisLink = this.getAttribute("data-tab");

var thisHref = this.getAttribute("href");

var thisTabPanel = document.querySelector(thisHref);

tabsModule.setAttribute("data-active-tab", thisLink);

hideAllTabPanels();

thisTabPanel.style.display = "block";

positionIndicator();

};

for (var i = 0; i < tabNavLinks.length; i++) {

tabNavLinks[i].addEventListener("click", tabNavLinkEvent, false);

}

(function() {

window.addEventListener("resize", resizeThrottler, false);

var resizeTimeout;

function resizeThrottler() {

if (!resizeTimeout) {

resizeTimeout = setTimeout(function() {

resizeTimeout = null;

actualResizeHandler();

}, 66);

}

function actualResizeHandler() {

positionIndicator();

}

})();

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

Raj'd June 15, 2019 At 6:49 pm

Superb👌👌👌💐💐💐

Reply
- shaan June 15, 2019 At 6:54 pm
  
  Thank you very much bro, Stay connected.
  
  Reply
Admir Rosa June 15, 2019 At 9:21 pm

Congratulations! Impeccable work, excellent! I’m starting to develop websites and daily studying their tutorials. They are great and very useful!

Reply
- shaan June 16, 2019 At 5:23 am
  
  Thank you very much bro, Stay Connected.
  
  Reply
DARPAN ANEJA June 16, 2019 At 3:34 am

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

Reply
- shaan June 16, 2019 At 5:25 am
  
  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.
  
  Reply
Tim June 16, 2019 At 8:19 am

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.

Reply
- shaan June 16, 2019 At 9:07 am
  
  Thank for your suggestion.
  
  Reply
John June 19, 2021 At 8:32 am

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

Reply
Max August 26, 2022 At 8:47 am

Hello Shaan,

thank you a ton for sharing this! I just began to learn to be a Web-developer one day. Actualy a try to figure out why your code (that i changed only a bit) dont work. It would be awesome if you could give me a hint.

https://codepen.io/Dabogert/pen/oNqRXKd

Reply