[Tutorial] Active Menu

Go down

[Tutorial] Active Menu

Post by Daemon on April 26th 2018, 1:48 pm

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!


Last edited by Daemon on April 28th 2018, 5:30 am; edited 4 times in total
avatar
Daemon
Forumember

Posts : 101
Reputation : 81
Language : Português

Back to top Go down

Re: [Tutorial] Active Menu

Post by SarkZKalie on April 26th 2018, 5:16 pm

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

If yes, great work thank you! Very Happy


avatar
SarkZKalie
Support Moderator
Support Moderator

Male Posts : 940
Reputation : 157
Language : English

http://rotavn.forumotion.com

Back to top Go down

Re: [Tutorial] Active Menu

Post by Daemon on April 27th 2018, 3:39 am

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

If yes, great work thank you! Very Happy

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

Posts : 101
Reputation : 81
Language : Português

Back to top Go down

Re: [Tutorial] Active Menu

Post by APE on April 27th 2018, 4:27 am

Nice work ADDED Wink



avatar
APE
Administrator
Administrator

Male Posts : 13141
Reputation : 1392
Language : fluent in dork / mumbojumbo & English haha

http://chatworld.forumotion.co.uk/

Back to top Go down

Re: [Tutorial] Active Menu

Post by Lucifer @ ForumGratuit.Ro on April 28th 2018, 3:18 am

Good Work ! 1st
avatar
Lucifer @ ForumGratuit.Ro
New Member

Posts : 5
Reputation : 1
Language : English / Romanian
Location : România , Constanţa

https://www.fgdesign.biz/

Back to top Go down

Re: [Tutorial] Active Menu

Post by YoshiGM on May 3rd 2018, 4:10 am

Amazing, Congratulations Wink
avatar
YoshiGM
Forumember

Male Posts : 757
Reputation : 108
Language : Spanish & English
Location : Mexico

http://asistencia.foroactivo.com/u21373

Back to top Go down

Re: [Tutorial] Active Menu

Post by Daemon on July 6th 2018, 12:22 am

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

Posts : 101
Reputation : 81
Language : Português

Back to top Go down

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum