[Tutorial] Active Menu

Go down

[Tutorial] Active Menu

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

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

Posts : 100
Reputation : 79
Language : Português

Back to top Go down

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
avatar
SarkZKalie
Forumember

Male Posts : 756
Reputation : 111
Language : English

http://rotavn.forumotion.com

Back to top Go down

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

Posts : 100
Reputation : 79
Language : Português

Back to top Go down

Re: [Tutorial] Active Menu

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

Nice work ADDED Wink



avatar
APE
Administrator
Administrator

Male Posts : 12322
Reputation : 1284
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 27th 2018, 5:18 pm

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 2nd 2018, 6:10 pm

Amazing, Congratulations Wink
avatar
YoshiGM
Forumember

Male Posts : 729
Reputation : 102
Language : Spanish, English & Italian (16%)
Location : Mexico

http://asistencia.foroactivo.com/u21373

Back to top Go down

Back to top


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