[Tutorial] Active Menu

Add an active class to the main menu

Watch the example:


All you have to do is create a new JavaScript (The placement: All pages).

Code:

/*
 *  Application: Active Menu
 *  Date: 26/04/2018
 *  Version: 1.226042018
 *  Copyright (c) 2018 Daemon <help.forumotion.com>
 *  This work is free. You can redistribute it and/or modify it
 */
document.addEventListener("DOMContentLoaded", function(event) {
    var location = window.location.pathname + window.location.search,
        mainmenu = document.querySelector("a.mainmenu[href='" + location + "']");
    if(mainmenu) mainmenu.className += " active";
});

(Optional) Simple css used in gif example:

Code:

a.mainmenu.active {
    background-color: white;
    color: #000;
    padding: 5px;
    text-decoration: none !important;
    font-weight: bold;
    border-radius: 4px 4px 0 0;
}

Enjoy!

So this script will let us open any nav bar link without refreshing the whole page?

If yes, great work thank you!

SarkZKalie wrote:So this script will let us open any nav bar link without refreshing the whole page?

If yes, great work thank you!

No! The code just adds an "active" class to the menu link, as in the gif example.

Nice work ADDED

Good Work !

Amazing, Congratulations

The code has been simplified and updated to the version: 1.226042018