The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

How to Add Active Class to navbar

Go down

Solved How to Add Active Class to navbar

Post by Mati on September 21st 2015, 9:59 am

How do I add “active class” to the menu item with jQuery that links to the page on which the visitor or user is.


Last edited by Mati on September 21st 2015, 11:53 am; edited 1 time in total
avatar
Mati
Active Poster

Posts : 1905
Reputation : 291
Language : || HTML || CSS || jQuery ||
Location : At the Gym

http://forumdirectory.forumotion.net/

Back to top Go down

Solved Re: How to Add Active Class to navbar

Post by Ange Tuteur on September 21st 2015, 11:25 am

It depends on the version of the forum you're asking for, but the typical way of checking is a clean URI against a clean href attribute.

Here's an example that should work on most default forum versions.
Code:
$(function() {
  var cleanURI = window.location.href.replace(/\?.*|#.*/, ''), // get the clean URL without queries or hashes
      menu = $('a.mainmenu'), // get menu items
      i = 0, // set index
      j = menu.length; // cache menu length

  // loop menu links
  for (; i < j; i++) {
    // clean the href and compare it with the window location
    if (menu[i].href.replace(/\?.*|#.*/, '') == cleanURI) {
      menu[i].className += ' activeNav'; // add a new class
      break; // break out of the loop because we found our match
    }
  }
});

Then you can style the navigation link with CSS :
Code:
a.mainmenu.activeNav {
  background:#39C;
}
avatar
Ange Tuteur
Forumaster

Male Posts : 13194
Reputation : 2907
Language : EN10, FR5, JA5
Location : Macungie, PA

https://github.com/SethClydesdale

Back to top Go down

Solved Re: How to Add Active Class to navbar

Post by Mati on September 21st 2015, 11:55 am

Thanks this works perfect Smile
avatar
Mati
Active Poster

Posts : 1905
Reputation : 291
Language : || HTML || CSS || jQuery ||
Location : At the Gym

http://forumdirectory.forumotion.net/

Back to top Go down

Solved Re: How to Add Active Class to navbar

Post by Ange Tuteur on September 21st 2015, 11:57 am

No problem. Smile

Topic archived

Have a nice day. ^^
avatar
Ange Tuteur
Forumaster

Male Posts : 13194
Reputation : 2907
Language : EN10, FR5, JA5
Location : Macungie, PA

https://github.com/SethClydesdale

Back to top Go down

Back to top


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