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.

Solution 1

What I didn't know at the time was that I should set each item in the top menu as a Menu Item Alias. This allowed me to keep the item highlighted when items were selected from the submenu.

According to Joomla documentation http://docs.joomla.org/Help16:Menus_Menu_Item_Manager_Edit#Menu_Item_Alias:

"This Menu Item Type creates a Link to an existing Menu Item. It allows you to have identical Menu Items on two or more different Menus without duplicating the settings. So, for example, if you change a parameter of a Menu Item that has an Alias linked to it, the Alias will automatically acquire the same change."

For those who, like me before, are struggling with the idea of Joomla menus - the main menu in such configuration sits in a "Module Menu" with Start and End Level set to 1 (Basic Options), and the submenu sits in a different "Module", but carries the same menu, buts starts from Level 2.

Solution 2

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.

Comments

[ellockie]

This is great answer. Thank you so much! I wasn't aware that a child menu can be separated from its parent.

[Eric G]

Yes, you can even start at a sub level and do many things, check this documentation: docs.joomla.org/Creating_a_submenu#Separate_Menu_Modules (I am pretty sure this applies to both 1.5 and 1.6)

[ellockie]

I appreciate your answer but later I realised that I was after a diffrent solution: Menu Item Alias. That worked like I wanted.

[open-ecommerce.org]

This works in Joomla 3.0 as well. But be careful i was 1 day trying with out success because i had in the global configuration Sef on but Use URL rewriting off and the mod_menu/tmpl/default.php was not geting the $aliasToId variable correctly