[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
Daemon
Daemon
Forumember

Posts : 101
Reputation : 83
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


SarkZKalie
SarkZKalie
Support Moderator
Support Moderator

Male Posts : 987
Reputation : 161
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.
Daemon
Daemon
Forumember

Posts : 101
Reputation : 83
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



APE
APE
Administrator
Administrator

Male Posts : 13866
Reputation : 1474
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
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

Re: [Tutorial] Active Menu

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

Amazing, Congratulations Wink
YoshiGM
YoshiGM
Forumember

Male Posts : 776
Reputation : 109
Language : Spanish & English
Location : Mexico

http://asistencia.foroactivo.com/u21373

Back to top Go down

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