Javacript is back in a big way! With the the rise of node.js javascript is quickly becoming the programming language of choice for anything to do with the web.Bearing this in mind I am now trying to replicate things that I would do simply with php or python with js only.
In this tutorial we will talk about how to add an active class to a menu item using javascript (well a little bit of jQuery as well). We will be completing the following:
- Getting the pages URL
- Splitting the URL into parts and getting the relative URL
- Looping through our menu and then adding an active class to the current page only
For the purpose of this example lets say that I am on the following URL:
testsite.com/pages/page-two/
The first part – setting up your menu in HTML
Set up your menu like you would normally in HTML :
[dt_code]
<ul class=”list-loop”>
<li><a data-slug=”page-one”>Page One</a></li>
<li><a data-slug=”page-two”>Page Two</a></li>
</ul>
[/dt_code]
Did you notice the data attribute? This will come in handy later.
Getting the pages URL and checking if it matches our active item
Now we need to setup a javascript file and add the following code:
[dt_code]
(function() {
//Get url for our active menu classes
var pathArray = window.location.pathname.split( ‘/’ );
//Get the 2nd last item in the array
var relURL = pathArray[pathArray.length – 2];
//Loop through the list and check is slug matches our variable then add an active class
$(‘ul.list-products > li > a’).each(function() {
var dataSlug = $(this).data(‘slug’);
if (dataSlug == relURL) {
$(this).addClass(‘active’);
}
});
})();
[/dt_code]
The first part of the code gets the pages URL and splits it into an array using the ‘/’ as a deliminator.
[dt_code]
var pathArray = window.location.pathname.split( ‘/’ );
[/dt_code]
Then we do javascript’s version of an array push to get the second last value in the array:
[dt_code]
var relURL = pathArray[pathArray.length – 2];
[/dt_code]
Why do we need to get the 2nd last value? Because our test site uses a trailing slash at the end of the url:
testsite.com/pages/page-two/
This means that the last value in the area will be blank, so we get the 2nd last.
Now that we have the current pages title as a variable (var relURL) all we need to do is loop through our list and check to see if the data slug attribute matches our page title variable:
[dt_code]
$(‘ul.list-products > li > a’).each(function() {
var dataSlug = $(this).data(‘slug’);
if (dataSlug == relURL) {
$(this).addClass(‘active’);
}
});
[/dt_code]
So the first part gets the attribute for the list item and stores it as a variable called dataSlug. Then we check to see if dataSlug matches our relURL variable and if does then we add an active class – simple.
Some final words
I originally needed to create this script because I had a wordpress app where I was listing all of the children of a custom post type. I didnt want the client to have to create multiple menus, I wanted them to generate dynamically. You can probably also use a php walker script, but I wanted to do something with js.
I did originally use php to do my wordpress custom post type list – though 😉
If you have any questions or comments feel free to leave them down below
