Set menu item active based on URL

Question

I've been trying really hard to accomplish what I'm trying to accomplish, but I can't get it to work the way I want. I have a navigation menu with first-level menu items (duh) and second-level menu items. It looks like this:

<ul class="nav" id="side-menu">
    <li>
        <a href="/admin/">Dashboard</a>
    </li>
    <li>
        <a href="/admin/pages/">Pages</a>
    </li>
    <li>
        <a href="#">Users<span class="fa arrow"></span></a>
        <ul class="nav nav-second-level">
            <li>
                <a href="/admin/users/">All users</a>
            </li>
            <li>
                <a href="/admin/users/roles/">Roles</a>
            </li>
        </ul>
    </li>
</ul>

I'm using the following jQuery function to add the active class to active menu items:

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

    if (element.is('li')) {
        element.addClass('active');
    }
    // Remove active class from A element if the page isn't the dashboard.
    if (location.pathname !== '/admin/' && $('[href="/admin/"]').hasClass('active')) {
        $('[href="/admin/"]').removeClass('active');
    }
};

This works fine for all first-level menu items and for the second-level menu item All users, but when I go to /admin/users/roles/, it makes All users and Roles active. The same thing happens when I go to /admin/users/roles/add/. I think this happens because the code makes all menu items active which look like the window.location, but I don't know how to only make Roles active when I go to /admin/users/roles/ and /admin/users/roles/add/, etc.

I really hope someone can help me with this. If you can, I'll buy you a beer.

Ajay Makwana · Accepted Answer · 2015-12-02T11:02:17.660

1

try this..

var loc = window.location.pathname;

   $('#side-menu').find('a').each(function() {
     $(this).toggleClass('active', $(this).attr('href') == loc);
  });

and ue full absolute path in href i.e.http://yourdomain.com//admin/users/roles/

edited Dec 02 '15 at 11:02

answered Dec 02 '15 at 10:46

Ajay Makwana

2,330
1
17
32

Thanks! When I now go to `/admin/users/roles/`, it only makes `Roles` active, so that's good. But when I got to `/admin/users/roles/add/` it doesn't do anything. Suggestions? – SomeCode Dec 02 '15 at 10:50
I used your code. You can find the other code I use in my first post. – SomeCode Dec 02 '15 at 11:15
make sure that your `/admin/users/roles/add/` is in `href` then it will work. – Ajay Makwana Dec 02 '15 at 11:29
That's right, but the users can only get to `/admin/users/roles/add/` by clicking on a `Add role` button on `/admin/users/roles/`. So I don't want to include `/admin/users/roles/add/` in my navigation menu, but `/admin/users/roles/` has to be active when users go to `/admin/users/roles/add/`. Is that possible? – SomeCode Dec 02 '15 at 11:41
you can use this type of if condition for special case after above code.. `if (url == '/admin/users/roles/add/'){//add active class to admin/users/roles/ }` – Ajay Makwana Dec 02 '15 at 12:04
i suggest you to give some special `id` to the Roles and then use this after above code `if(url == '/admin/users/roles/add/'){ $('#roles').addClass('active'); }` – Ajay Makwana Dec 02 '15 at 12:11

Set menu item active based on URL

1 Answers1

Linked