Joomla: How to keep main menu item highlighted while navigating through separate submenu items?

Question

I'm trying to make a horizontal, "category" main menu and a vertical submenu, separated from the main one. When I select a category its main page is displayed. But when I select another page from the submenu, that is supposed to be from the same category, then the "category" item from main menu stops being highlighted. All the menus are defined as a "stand-alone" modules and I'm using Joomla 1.6.3.

Answer 1

Any type of highlighting or effect is based upon CSS classes which are assigned in the creation of the menu via XML. If you have each menu as separate instead of one large hierarchy you may run into problems. Your menu structure should be made in one module using hierarchy.

If we look at the Joomla 1.6 demo page at: hhttp://demo16.cloudaccess.net/index.php/using-joomla/extensions We can see that "Using Joomla!" is the parent and "Using Extensions is the child". Let's look at the CSS classes assigned to the

for each of those links

Using Joomla - class="active deeper parent" Using Extensions - class="current active deeper parent"

You can then control formatting using CSS Javascript based upon the hierarchy like

 li.parent li.current { CSS here } //do things based on the current
 li.active li.active { css here } // add an .active for each level down the hierarchy, for example to affect 3 ways in, require three li.actives in the hierarchical-selector  

For example here are some the CSS rules being used on that page:

ul.menu li.active a:link, ul.menu li.active a:visited { 
    color: #333333;
}

ul.menu li.active ul li.active a:link, ul.menu li.active ul li.active a:visited { 
     border-bottom-color: #ffffff;
     border-bottom-style: solid;
     border-bottom-width: 1px;
     border-left-color: currentColor;
     border-left-style: none;
     border-left-width: 0px;
     border-right-color: currentColor;
     border-right-style: none;
     border-right-width: 0px;
     border-top-color: currentColor;
     border-top-style: none;
     border-top-width: 0px;
     color: #333333;
 }

If you are not using one large menu for everything, then the parent items will not have the correct CSS classes added and you will have to do more complex javascript.