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 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
<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
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. Second, I've declared another variable page and store the default index url with forward slash (/) and added the increment value (+1) in it;
meaning, the increment value (+1) will get the page value you might selected.
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
$('#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
$('#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
$('#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!