We are working on a site that uses the Joomla! page class suffix parameter on each menu item to change the design (through CSS) of each page. In this case each section/page of the site is defined by a specific color.

As part of the design we made the menu item rollovers and drop down menus match the color of the page's background/accent color. This could easily be done in the CSS by targeting the unique "item" class that is added to every menu item as such:

<li class="parent active item3">

But what happens when the client changes their mind on the color of a section? You would need to change the page class suffix on the menu item in Joomla! and then change the classes in your CSS file—what a pain!

What's the easy and ideal way to do this? Template overrides of course!

What we've done is created a template override for mod_mainmenu that adds the menu item's page class suffix as an additional class to the menu's markup like so:

<li class="parent active pageclass-suffix item3">

Here is how we did it:

First we need to get the menu item's parameters based on its ID

$item_params = $menu->getParams($node->attributes('id'));

Second we assign the page class suffix as a class to the LI element of the menu item's markup

if( $item_params->get('pageclass_sfx') ){
    $node->addAttribute('class', 
    $node->attributes('class').$item_params->get('pageclass_sfx').' ' );
}

You can download our template override for mod_mainmenu here.