Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>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.</p> <p>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 <li> for each of those links</p> <p>Using Joomla - class="active deeper parent" Using Extensions - class="current active deeper parent"</p> <p>You can then control formatting using CSS Javascript based upon the hierarchy like</p> <pre><code> 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 </code></pre> <p>For example here are some the CSS rules being used on that page:</p> <pre><code>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; } </code></pre> <p>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.</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload