Add active Menu or Navigation class based on URL

Photo by Christopher Gower on Unsplash

As a front-end developer, I created this post to share my experience and thoughts about this topic. As beginner you will also experience how to add an active Menu or Navigation class based on URL.

So i'm going to share what I did to solve this problem.

First I did a lot of research, thanks to google by the way; without further a do, code below are provided and let me explain my small thoughts about this.

Javascript Code

var url = window.location.href;
var page = url.substr(url.lastIndexOf('/') + 1);
if (page) {
$('#menu_holder li [href="' + page + '"]').addClass('link_active');
} else if (page) {
$('#menu_holder li [href=!"' + page + '"]').addClass('link_active');
} else {
$('#menu_holder li:first').addClass('link_active')
}code-box

HTML Code

<ul class="menu_hen" id="menu_holder">
<li class="menu_chicks"><a href="?varx=games">Home</a></li>
<li class="menu_chicks "><a href="?varx=videos">Videos</a></li>
<li class="menu_chicks"><a href="?varx=tones">Tones</a></li>
<li class="menu_chicks"><a href="?varx=apps">Apps</a></li>
</ul>code-box

CSS Code

.link_active{
background:#fff;
}
.menu_hen {
list-style: none;
padding: 0;
}
.menu_chicks {
display: flex;
display: -webkit-flex;
justify-content: center;
align-items: center;
}
.menu_chicks a img {
padding: 2rem;
}code-box


Javascript code explanation;

First, I've declared the url variable and store the url address of my website. 
var url = window.location.href;code-box

Ex. www.bloggersph.com/alert-success
Second, I've declared another variable page and store the default index url with forward slash (/) and added the increment value (+1) in it;
var page = url.substr(url.lastIndexOf('/') + 1);code-box

meaning, the increment value (+1) will get the page value you might selected. 
ex. www.bloggersph.com/videosalert-success

Then, I've declared an IF statement which now holds the current URL of the page you've been selected.

Let say; default page is equals to www.bloggersph.com/; by default, home page will contains an active class.

If page URL is equal (=) to www.bloggersph.com/videos, or equal to www.bloggersph.com/tones, or equal to www.bloggersph.com/apps, the clicked menu will now contains an active class .link_active
if (page) {
$('#menu_holder li [href="' + page + '"]').addClass('link_active');
}code-box

Else if, page URL is not equal (!=) to www.bloggersph.com/videos, or not equal to www.bloggersph.com/tones, or not equal to www.bloggersph.com/apps,  your home page which is www.bloggersph.com will contain an active class .link_active 
else if (page) {
$('#menu_holder li [href=!"' + page + '"]').addClass('link_active');
}code-box

Else, your home page contains an active class .link_active
This means that, if page is equals (=) to www.bloggersph.com/, your home page default link will contain an active class .link_active
else {
$('#menu_holder li:first').addClass('link_active')
}code-box

      Thank you for taking time to read this published article, and please submit a comment down below if you sincerely like the content.

      You can also follow me on social media(s) for more updates.

      Post a Comment

      Much appreciated for gently taking so much personal time to respectfully submit a published comment on BloggersPh. If you sincerely want to submit some ethical questions, I will be delighted to respond appropriately them here or via private email. Please do not submit a mean or disrespectful comment; they will be eradicated. Enjoy!

      Previous Post Next Post