Menu CSS Suffix

Menu CSS Suffix.
In the Joomla Template code section under CSS I explained what a Module suffix was.
Menu suffixes are just the same Idea but for Menu CSS formatting then its applied to the menu modules parameters settings.

A scenario maybe that you have more then one menu in your template.
A List menu that you like to make horizontal menu and also have it appear as vertical menu as well.

Joomla's default list menu is vertical so the vertical menu is easy.
What happens if you like to make a horizontal menu on the same template?
If you have the master CSS classes styled for a vertical menu.
Then you our going to have an issue with a horizontal menu because they share the same CSS Class.
That's where Joomla's Menu Suffix's come to into play.

Code view of Menu Class suffix in the navigation.css style sheet.



example of a module menu parameter setting for a Menu Class suffix


By adding a "_Suffix" to a master class for your menu into the navigation.css style sheet.
Then applying via the Joomla Back-end > Module Manager then to menu module.
That your going to used for your horizontal menu.

Also later on in the core section in the module manager you will see that's it's possible to copy a module.
And have two of the same module with different parameters.
This means that you can add different formatting on the same type of module.
An example would be a menu at the top of the page in one color and another in the footer in another color.

Special note: horizontal menus with sub levels aka nested menus take some Javascript code and a little adjusting of the menu parameters to get it working.
At this time the only menu type that can do this in the List menu type without a third party extension.