Joomla Templates: Creating a Pure CSS Template | Part 3/Page 3 | WebReference

Joomla Templates: Creating a Pure CSS Template | Part 3/Page 3

[previous] [next]

Joomla Templates: Creating a Pure CSS Template - Part 3

Menus in Templates

We saw in Chapter 5, "Creating Menus and Navigation," that there are a number of settings for how a menu will be rendered.

Again, using CSS lists rather than tables results in reduced code and easier markup. After setting all our menus to lists we have only 12 tables (we see how to remove the rest using the new version 1.5 override feature). Remember, the list setting is the new 1.5 version; flat list is from 1.0 and will be depreciated. Lists are also better than tables because text-based browsers, screen readers, non-CSS supporting browsers, browsers with CSS turned off, and search bots will be able to access your content more easily. One of the other advantages of using CSS for menus is that there is a lot of example code on various CSS developer sites. Let's look at one of them and see how it can be used.

A web page at has a selection of over 30 menus, all using the same underlying code. It's called the Listamatic. There is a slight difference in the code that we need to change in order to adapt these menus to Joomla.

These lists use the following code:

This means that there is an enclosing <div> called navcontainer, and the <ul> has an id of navlist. To duplicate this effect in Joomla, we need to have some sort of enclosing <div>.

We can achieve this by using module suffixes. If you recall, the output of an (X)HTML style option module is

If we add a module suffix, that will get added to the moduletable class, like this:

So when picking a menu from Listamatic, you need to replace the navcontainer class style in the CSS by moduletablesuffix.


Module suffixes, to a certain extent, blur the line between site design and site administration. One of the goals of further development of the Joomla core is to clearly separate these roles. The implication is that it is likely they might be depreciated in future versions beyond 1.5.

This use of a module class suffix is helpful. It allows different colored boxes with just a simple change of the module class suffix.

The Least You Need to Know

It's best to always use the bulleted or flat list for menu output. You can then make use of many free resources for the CSS that are available on the Web.

For our site, we use List 10 by Mark Newhouse. Our CSS is

We then need to add the module suffix of menu (no underscore in this case) to any modules of menus we want to be styled. This produces a menu like what's shown in Figure 9.7.

For any menu we want to be styled this way, we have to add "menu" as a module suffix.


When trying to get a particular menu to work, here is a useful tip: Create a default Joomla installation and then look at the code that makes up the mainmenu. Copy and paste this code into an HTML editor (like Dreamweaver). Replace all the links by "#," and then you can add CSS rules until the effect you want is achieved. The code for the menu to create the style is as follows:

The CSS is embedded instead of linked to make editing easier.

FIGURE 9.7 Basic template with menu styling
FIGURE 9.7 Basic template with menu styling

[previous] [next]