How does this template set active nav links?

[schwim]

Hi there everyone!

Template: https://s-esx.com/fivemin/template/pages/index.html

To explain what I mean, in the left nav, click “Charts” and then “Morris.js Charts”. On the next page that loads, the flyout remains open and the Morris nav li is set active(darkened). The problem I’m having is that when I create new pages for this, I need to keep these links active but I can’t see how it’s done. I’ve looked at the page source when a link is set as active but I can’t see anything in the code that would do it. I am assuming that this is being set via jquery somehow.

Could someone tell me how this is done?

Thanks for your time!

[m3g4p0p]

Hi @schwim, they find the active link by comparing the window.location to the href properties of the nav links; here’s the script doing that, ll. 32 - 38 (they’re indeed using jQuery although this is of course not required).

[schwim]

Thanks very much for the help, I really appreciate it!

I found a class=“active” in the inspector and I tried placing it on the link I wanted highlighted and while it does highlight it, the parent nav stays collapsed. I just can’t figure out how to force the parent to be open on page load.

Here’s the page I’m working on: https://s-esx.com/fivemin/demo.html

I’m trying to get “Servers” parent link to have the sub menu flyout open by default. Is there some class I can apply to it like I did to “Final Destina…” to make this happen?

[m3g4p0p]

The class name for expanding a menu is in – it’s the part in the while loop right in the following lines.

[schwim]

Thanks to you linking the jquery, I know I’m getting close but I’m having problems reading it to understand what it’s doing:

    var url = window.location;
    // var element = $('ul.nav a').filter(function() {
    //     return this.href == url;
    // }).addClass('active').parent().parent().addClass('in').parent();
    var element = $('ul.nav a').filter(function() {
        return this.href == url;
    }).addClass('active').parent();

    while (true) {
        if (element.is('li')) {
            element = element.parent().addClass('in').parent();
        } else {
            break;
        }
    }

I looks like that it says if the element is [li], then I need to add a class=“in” in the parent, which I took to mean the opening [ul] but adding a class=“in” on that UL didn’t do anything.

I’ll keep trying passing the class to other elements to see if I can figure it out.

EDIT: Sorry, I missed your reply. I’ve tried passing class=“in” to both the parent UL and LI but both have failed to open the menu. What element needs to get this class?

[schwim]

Sorry for the bother, I figured out where to pass “in” properly at the UL. Thank you for your time and help!

[m3g4p0p]

No worries! :-)