Set main menu highlighted item depending on their sub items selection

Farah El Agha asked on December 11, 2017 10:22

Hi, I have a top menu navigation, that is built using a repeater and not a CMSMenu, I also set a script to change the css for the highlighted menu item, which changes when hovering on other items. the script is:

$(document).ready(function(){

$(".CMSListMenuLI").hover(function(){  
   $(".CMSListMenuHighlightedLI").css("background-color", "#67c0ea");
   $(".CMSListMenuHighlightedLI>.IndexMenu-triangle-down").css("display", "none");
  $(this).css("background-color", "#8ad9ff");

},function(){
$('.CMSListMenuLI').css("background-color", "#67c0ea");
  $(".CMSListMenuHighlightedLI>.IndexMenu-triangle-down").css("display", "block");

$(".CMSListMenuHighlightedLI").css("background-color", "#8ad9ff");

});

});

the script works fine, here's a screenshot of my menu MY MENU

the problem is that I have sub Items for Events and Projects menu item, and when I access these sub items I want the parent Item (Events and Projects) to stay highlighted in the main menu, is this doable?

Recent Answers

David te Kloese answered on December 11, 2017 17:10

So is this 5 times a repeater (each sub level menu) in a repeater (each first level)? If so why not use a Hierarchical Viewer?

You can check the first level if it's alias path matches the beginning of the current pages alias path.

0 votesVote for this answer Mark as a Correct answer