How to highlight visited menu links with CSS and JavaScript
Updated: 31-Jan-2022 / Tags: HTML, CSS and Javascript / Views: 2694 - Author: George
Introduction
Most of the websites that we are going to design and create, will have a navigation menu.
It is a common practice that we highlight the link that indicates the page we are on.
I don't know why but i see many new programmers to do complicated thinks to achieve this task.
In this article article we will see an easy way to do this.
Live Demo
Take first a look at the live demo by clicking the button bellow.
The html code
This is the index.html file. Let's see what we have here.
<body id="index">
<nav>
<div class="links">
<a data-active="index" href="index.html">Home</a>
<a data-active="products" href="products.html">Products</a>
<a data-active="authors" href="authors.html">Authors</a>
<a data-active="about" href="about.html">About us</a>
<a data-active="contact" href="contact.html">Contact us</a>
</div>
</nav>
- First of all We have 5 links, that means that we have 5 pages.
-
Every a link has a data-active attribute, which holds as a value, the name of the file that the link points to.
But this is not a rule, we can give to the data-active attribute any value we like.
The important thing is that the body id matches the data-active value of the visited page.
let me explain:
In the index.html file we gave the body element an id="index". And we set the same value to the Home link data-attribute.
In the products.html file we will set the body id="products", so it matches the products link data-attribute. And so on. - We are doing this because we need in every page we visit a reference point, so we can highlight the correct link. You will see that in the javascript code.
The javascript code
Now let's see what we have here.
let links = document.querySelectorAll(".links a");
let bodyId = document.querySelector("body").id;
for(let link of links){
if(link.dataset.active == bodyId){
link.classList.add("active");
}
}
- In line 1 we grab all the links and we store them in a variable named links. The Variable links is now an array holding the links.
- In line 2 we are targeting the body id.
- In line 4 we loop trough the links.
- In line 5 we check which link's data-active attribute is equal to the body id.
-
When we find a match, we add to that link the ".active" css class, which we have in the css file.
This class is adding the highlight to the visited link.nav a.active{ background: #245990; color: #fff; box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); }
Summary
We saw how to highlight the visited menu links using JavaScript and CSS.
Source code
You can download the source code and use it in any way you like.
Times downloaded: 469
Buy me a coffee
Created By Digitalfox
Responsive navigation with working login system using PHP Mysql and Ajax
Responsive navigation menu that integrates a secure login and register system, with a forgot password action, and a contact form.
The whole system is animated in slide-in sidebars and shows up on the right side of the web-design.
Comment section
You can leave a comment, it will help me a lot.
Or you can just say hi. 😉