how to make navigation tree activate active state

2
if i click on the menu, you go to the page, when you click on the menu item again it gains the .active class allowing style elements to be applied to the item letting the user know which page they are on. is it possible to do this on the first time you click because I doubt users will click on the same menu item twice? What am I doing wrong, or is this working as intended?
asked
3 answers
4

Hi Jason,

 

I've run into that issue in the past as well. Eric has created a pretty useful widget that will set the active class for the navigation tree based on the name of it.

https://github.com/tieniber/ActiveMenuSelector

 

You just drop this widget on each page and it will set the navigation item to active based on the caption of it.

 

You could also use jQuery to set the active state based on a class. Here is a quick example.

jQuery(document).ready(function() {
   setTimeout(function() {
   
	$(".mx-name-c2220b64-1911-4e47-b06d-a60a5c6d4cde-0").find("a").addClass("active")
	
	
	}, 100);

});

 

Hope this helps!

answered
2

It should just set the active class the first time you click. Are you using the same (master)layout that contains the navigation when you are switching pages? If it is not the same it will refresh the navigation.

answered
0

What I would like, not sure if this is even possible, or if you’d want to do it this way is:

Detect what page I am on.
is there a link that goes to this page, set a class on that element.

or

have links have unique page names
pages have page names, if they match up, add an active class

Im sure there are multiple ways of doing this, each with their own pros and cons, but might be interesting to see if we can make a scalable user friendly way to solve this issue :D 

answered