Menu and Module Class suffixes
These control the appearance of menus. All of the menus use CSS in the template to style how they look. By carefully coding the CSS, the menuÂ’s appearance can be quickly and easily changed based on the suffixes used. An example of how this works might be different colored rounded boxes as shown below with our Joomlashack examples. These are four popular templates:
- demotemplates.joomlashack.com/lush
- demotemplates.joomlashack.com/element
- demotemplates.joomlashack.com/simplicty
- demotemplates.joomlashack.com/lightfast
Menu Styles
There are two main ways to display your menu. One is to use a table for the layout (either vertical or horizontal) and the other is to use a bulleted list. In other tutorials I have discussed at length template design and how to make W3C valid websites. A big part of this is the subtle design differences between using tables or pure CSS for layout. This is getting technical, just know that you need to select whatever the template documentation calls for. Also, you can’t have sublevels currently in 1.0.X with a flat list.
At the time of writing, Joomla 1.5 has legacy support for the previous way that a bulleted list was rendered (flat list) and a new way that allows more flexibility (list).
Thus there are currently 4 options:
- List – New method of showing a bulleted list
- Vertical – uses a vertical table
- Horizontal – uses a horizontal table
- Flat List – old method of showing a bulleted list
Submenus
Joomla has a feature where you can create submenus and they can be displayed in various ways. In the previous version of Joomla, it was not possible to have submenus if you were displaying your menu as a flat list. This was an issue as a bulleted list is a much more standards compliant method of displaying links.
In 1.5, this functionality is added to menus. It allows you to have submenus and flat lists. This is very important, as in the hands of a skilled template designer it allows you to do things like have dropdown menus and images for links without having to resort to JavaScript or tables, both of which are bad for accessibility, SEO and W3C compliance.
If “always show submenu items” is set to “yes” you get the out put shown below. Note that you MUST have the menu style selected as List.
<li class=”level1 item1″
<a href=”/”
</li
<li class=”level1 item2″
<a href=”/”
</li
<li class=”level1 item3 parent”
<a href=”/”
<ul
<li class=”level2 item1″
<a href=”http://www.compassdesigns.net”
</li
<li class=”level2 item2″
<a href=”http://www.joomlashack.com”
</li
</ul
</li
<li id=”current” class=”level1 item4 active”
<a href=”/”
</li
</ul
Notice the new output. There are multiple classes on the <li
This feature is very welcome to the flexibility of menus in dev blog at the Joomla site.