Menus

Setting that control how a menu is outputted are controlled in the module that publishes it. When you first make a module you will see a note that tells you that a module has been created with the same name.

In the module for that menu, there are several options for how the menu is presented:

• Vertical
  The menu appears as a vertical table
• Horizontal
  The menu appears as a horizontal table
• Flat List
  The menu appears as a flat <ul> CSS list

The table format produces code such as:

The flat list will produce (for the same menu):

Again, using CSS lists rather than tables results in reduced code and easier markup. After setting all our menus to flat lists we have only 12 tables (the rest cannot be removed withour hacking). Lists are also better than tables because text-based browsers, screen readers, non-CSS supporting browser, 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 alot of example code on various CSS developer sites. Lets look at one of them and see how it can be used.

A web page at maxdesign.com has a selection of over 30 menus all using the same underlying code. Its called the Listamatic. There is a slight difference in the code that we have 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 add a module location, let's use user1 before the left modules.

Note that we place the mosLoadModules inside the <div> that matches those from ListaMatic. This could be any name, but for the purposes of this tutorial, its useful to be able to easily use all those menus!

Next, if there are any references to navlist, for Joomla this is output as mainlevel:

Lastly, we need to add a CSS module suffix to the module in the admin backend so that module can receive unique CSS styles.

A Module Class Suffix can be used on any module. When outputted, the names of the <div> for that module will have the suffix appended.

So in this case:

• If it is using a -2 style it would be .moduletable-leftnav.
• If it is using a -3 style it would be .module-leftnav.

This use of a module class suffix is very useful. We will see in the Tips and Tricks section that it allows different colored boxes with just a simple change of the module class suffix.

For our site we will use List 10 by Mark Newhouse. Our CSS will be: