+ Full Stack Tutorials
+ HTML, CSS and Javascript
+ Javascript and JSON
+ Javascript and Local Storage
+ Javascript Lang Reference
+ Javascript Tutorials
+ PHP and AJAX
+ PHP and JSON
+ PHP and MYSQL
+ PHP Lang Reference
+ PHP Tutorials
+ JAVASCRIPT
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); } - This is all the code we need. I hope you find the article helpful.
- Thanks for reading.
Summary
We saw how to highlight the visited menu links using JavaScript and CSS.
Download source code
You can download the source code and use it as a template to build your website.
Times downloaded: 342
View on Youtube
Comment section
You can leave a comment, it will help me a lot.
Or you can just say hi. 😉