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

View previous topic View next topic 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

Mati
Active Poster

Posts : 1884
Reputation : 283
Language : || HTML || CSS || jQuery ||
Location : At the Gym

http://footballforums.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;
}

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

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

Mati
Active Poster

Posts : 1884
Reputation : 283
Language : || HTML || CSS || jQuery ||
Location : At the Gym

http://footballforums.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. ^^

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


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