Joomla: How to keep main menu item highlighted while navigating through separate submenu items?_问答_开发者

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

开发者 https://www.devze.com 2023-03-15 06:27 出处：网络

I\'m trying to make a horizontal, \"category\" main menu and a vertical su开发者_开发百科bmenu, separated from the main one. When I select a category its main page is displayed. But when I select anot

I'm trying to make a horizontal, "category" main menu and a vertical su开发者_开发百科bmenu, 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.

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.

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.