Compass Designs

There are a number of great improvements to menus in Joomla 1.5. These are focussed on providing more flexibility to template designers and making Joomla sites more accessible and W3C valid. Specifically, significant improvments have been made to bulleted lists to now allow better submenus (for things like dropdown menus) and image replacement.

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:

1. List - New method of showing a bulleted list
2. Vertical - uses a vertical table
3. Horizontal - uses a horizontal table
4. 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.

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.