How to change Default Selected Menu Item in Menu Navigation | CRMHC 7.31 on Pega 7.3.1
I am trying to change the default selected Menu item in Menu Navigation.
I am using Primary Navigation (as given in attachment)
I tried explicitly using a Javascript in a section on load of the Section using Menu Navigation as below but no luck :
<script>
pega.u.d.attachOnload(function(){
var elems = $(".menu-format-primary-navigation> li");
var index=2;
index=parseInt(index);
elems.first().removeClass("menu-item-active");
elems.find("li:eq("+index+")").addClass("menu-item-active");
});
</script>
Is there some way to handle this easily whenever required?
Hello Marc,
On section load, I am trying to highlight the 3rd menu item in a menu navigation using vertical alignment with Primary Navigation style as attached.
I do not think you can "default" a menu item. May be move it as the first item in your menu so that its on top by default ?
Also on section load, the menu item is collapsed right ? Have you written code to "open" it by default ?
Before you place the focus on the second element, try to simulate the onClick on the <A> element that hosts the menu and then place the focus on the menu item
May be move it as the first item in your menu so that its on top by default ?
We cannot shift the menu item to the top
Also on section load, the menu item is collapsed right ? Have you written code to "open" it by default ?
No I am not opening it by default. But this should not change anything here because I am able to change active menu item on load. This issue is that it is set back in few seconds back to first menu item. So, I need to undo that.
Something like this,
document.getElementsByName("<your menu link here >")[0].click()
You might want to test it on all browsers to check whether it works. click() may not be supported by all browsers.
The suggested code does not seem relevant here as per my comments above.
Below link might help you
The link you have added is completely different topic. How can it help me here.
Hi,
Please try this slightly modified code if you really want to change the highlighted menu item using JS:
<script>
pega.u.d.attachOnload(function(){
var elems = $(".menu-format-primary-navigation> li");
if (elems.length > 0) {
elems.first().removeClass("menu-item-active");
var idx = 2;
$(elems[idx]).addClass("menu-item-active");
}
}, true);
</script>
Thanks Akash.
This helped here.
Hello,
Sorry I don't understand what you are trying to achieve. Can you clarify? Which rule are you trying to change here?