[Tutorial] Active Menu

Go down

[Tutorial] Active Menu Empty [Tutorial] Active Menu

Post by Daemon 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 : 104
Reputation : 90
Language : Português

View user profile

Back to top Go down

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

Post by SarkZKalie 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 : 1262
Reputation : 204
Language : English

View user profile https://rotavn.forumotion.com/

Back to top Go down

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

Post by Daemon 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 : 104
Reputation : 90
Language : Português

View user profile

Back to top Go down

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

Post by Ape 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 Keep_s10
[Tutorial] Active Menu Ape1010
Ape
Ape
Administrator
Administrator

Male Posts : 16610
Reputation : 1791
Language : fluent in dork / mumbojumbo & English haha

View user profile http://chatworld.forumotion.co.uk/

Back to top Go down

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

Post by Lucifer @ ForumGratuit.Ro 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

View user profile https://www.fgdesign.biz/

Back to top Go down

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

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

Amazing, Congratulations Wink
YoshiGM
YoshiGM
Active Poster

Male Posts : 1090
Reputation : 131
Language : Spanish & English
Location : Mexico

View user profile http://asistencia.foroactivo.com/u21373

Back to top Go down

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

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

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

Posts : 104
Reputation : 90
Language : Português

View user profile

Back to top Go down

Back to top


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