[Tutorial] Active Menu

Go down

[Tutorial] Active Menu Empty [Tutorial] Active Menu

Post by Daemon on April 26th 2018, 3:48 am

Add an active class to the main menu

Watch the example:
[Tutorial] Active Menu PriskUj

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 27th 2018, 7:30 pm; edited 4 times in total
Daemon
Daemon
Forumember

Posts : 101
Reputation : 83
Language : Português

Back to top Go down

[Tutorial] Active Menu Empty Re: [Tutorial] Active Menu

Post by SarkZKalie on April 26th 2018, 7:16 am

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

If yes, great work thank you! Very Happy


[Tutorial] Active Menu Sarkzk10
SarkZKalie
SarkZKalie
Support Moderator
Support Moderator

Male Posts : 1053
Reputation : 177
Language : English

https://www.rotavn.xyz/

Back to top Go down

[Tutorial] Active Menu Empty Re: [Tutorial] Active Menu

Post by Daemon on April 26th 2018, 5:39 pm

@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.
Daemon
Daemon
Forumember

Posts : 101
Reputation : 83
Language : Português

Back to top Go down

[Tutorial] Active Menu Empty Re: [Tutorial] Active Menu

Post by APE on April 26th 2018, 6:27 pm

Nice work ADDED Wink


[Tutorial] Active Menu Left1212[Tutorial] Active Menu Center11[Tutorial] Active Menu Right112
[Tutorial] Active Menu Ape_b110
[Tutorial] Active Menu Ape1010
APE
APE
Administrator
Administrator

Male Posts : 14267
Reputation : 1542
Language : fluent in dork / mumbojumbo & English haha

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

Back to top Go down

[Tutorial] Active Menu Empty Re: [Tutorial] Active Menu

Post by Lucifer @ ForumGratuit.Ro on April 27th 2018, 5:18 pm

Good Work ! 1st
Lucifer @ ForumGratuit.Ro
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

[Tutorial] Active Menu Empty Re: [Tutorial] Active Menu

Post by YoshiGM on May 2nd 2018, 6:10 pm

Amazing, Congratulations Wink
YoshiGM
YoshiGM
Forumember

Male Posts : 795
Reputation : 111
Language : Spanish & English
Location : Mexico

http://asistencia.foroactivo.com/u21373

Back to top Go down

[Tutorial] Active Menu Empty Re: [Tutorial] Active Menu

Post by Daemon on July 5th 2018, 2:22 pm

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

Posts : 101
Reputation : 83
Language : Português

Back to top Go down

Back to top


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