Right now, every item in the active trail has the "Active" and the "Active Trail" class. The "Active" class should be unique to just the active item, not its parents. The way it is right now makes it extremely difficult to single out just the active menu item with CSS. Any style I give to "Active" will be applied to all parents of the actual active item. That's what "Active Trail" should be used for.

For now, I'm going to have to try to use jQuery to somehow give the active item a unique class in order to finish this project in time. Wish me luck.

Comments

loopy1492’s picture

loopy1492 commented

Here's my jQuery hack work-around. Let me know if it could be more efficient.


(function ($) {
	$(document).ready(function(){
		//add a "not top level" class class to all parents of the top level menu
		$("li.active").parents().addClass("not_top_left_menu_item");
		//remove "active" class from all parents of the top level menu
		$("li.active").parents().removeClass("active");
		//remove "active" class from all <a> tags of parents of the top level menu
		$("li.not_top_left_menu_item a").removeClass("active");
		//try to do some cleanup on other block elements
		$("div").removeClass("not_top_left_menu_item");
		$("ul").removeClass("not_top_left_menu_item");
		$("body").removeClass("not_top_left_menu_item");
		//Add the active class back to the child of the active li tag
		$("li.active a").addClass("active");

		//Add a toggle arrow to the items with submenus
		//NOTE: you may have to adjust this for menus which are more than 2 levels deep
		$("#sidebar-first .block-menu-block .menu .expanded a").addClass("main_parent_li");
		$("#sidebar-first .block-menu-block .menu .collapsed a").addClass("main_parent_li");
		//Now remove it from the children
		$("#sidebar-first .block-menu-block .menu .menu a").removeClass("main_parent_li");
		//add the arrow to it... you'll have to style this yourself, of course. I suggest doing an absolute position if your <a> tags are set to block/relative
		$(".main_parent_li").append('<span class="arrowed">&nbsp;</span>');



	});
}(jQuery));