Joomla! How-To's: Templates

When you create a menu with the Joomla! menu manager, a corresponding menu module is automatically created. In the resulting menu module, you will have 3 options for how to display your menu with the "menu style" parameter. The 3 choices offered are vertical, horizontal, and flat list. In this list, there are 2 ways to create a horizontal menu: the right way, and the not-so-right way. In this article, I will explain both ways, and try to persuade you that the right way is the right way. I'll start with the not-so-right way.

The not-so-right way to create a horizontal menu

As you probably guessed, "vertical" is not one of the 2 choices of menu style that will enable you to create a horizontal menu. (Technically, you probably could create a horizontal menu with this choice by using some really creative and advanced CSS, but that is beyond the scope of this article and probably a bad idea altogether.) So natrually that only leaves "horizontal" and "flat list". If you think "flat list" is the not-so-right way, you're wrong. Yes, "horizontal" will create a horizontal menu for you, but there is a better way, which I will discuss later.

Menu Style = "horizontal"...the not-so-right way

Setting menu style to "horizontal" will create a horizontal menu. In fact, it is probably the quickest and easiest way to create a horizontal menu in Joomla!. If you do not care about using modern XHTML/CSS techniques in your template, then by all means please use this menu style. Here's what it does.

This menu style will render your menu in a one-row, one-column table with each menu item side-by-side with no line breaks between them. Logically, if the menu items are side-by-side with no line breaks, they will appear horizontally. This is what the resulting code looks like (I added the line breaks and code indentions to make it easier to read.), assuming you are using a vertical bar as a separator:

 
<table width="100%" border="0" cellpadding="0" cellspacing="1">
  <tr>
    <td nowrap="nowrap">
      <a href="http://www.yourdomain.com/link/to/MenuItem1" class="mainlevel[suffix]" >MenuItem1</a><span class="mainlevel[suffix]"> | </span>
      <a href="http://www.yourdomain.com/link/to/MenuItem2" class="mainlevel[suffix]" >MenuItem2</a><span class="mainlevel[suffix]"> | </span>
      <a href="http://www.yourdomain.com/link/to/MenuItem3" class="mainlevel[suffix]" >MenuItem3</a>
    </td>
  </tr>
</table>
 

There is nothing wrong with this technique other than the fact that it uses a table as part of the layout. That is why I call it the not-so-right way, and not the wrong way.

The right way to create a horizontal menu

If you're like me, and you want to use modern techniques and proper XHTML markup and CSS in your designs, then set your menu style to "flat list". It renders your menu in an unordered list. This is what the HTML markup looks like (Line breaks and indentions added by me):

 
<ul id="mainlevel[suffix]">
  <li><a href="http://www.yourdomain.com/link/to/MenuItem1" class="mainlevel[suffix]" >MenuItem1</a></li>
  <li><a href="http://www.yourdomain.com/link/to/MenuItem2" class="mainlevel[suffix]" >MenuItem2</a></li>
  <li><a href="http://www.yourdomain.com/link/to/MenuItem3" class="mainlevel[suffix]" >MenuItem3</a></li>
</ul>
 

Why is this important?

Without CSS to format this HTML markup, this menu will simply display as an unordered, bulletted list, which is exactly what a menu should be. A menu is simply a list of links to help navigate through your site.

OK, but how do I make it horizontal?

The short answer is CSS. Here is one example of what your CSS might look like:

 
 
ul#mainlevel {

  margin: 0;
  padding: 0;
 
}
ul#mainlevel li {

  display: inline; /* Shows each item side-by-side */
  list-style-type: none; /* Gets rid of the bullet points */
 
}
 
ul#mainlevel a {

  display: block;
  float: left;
  padding: 0 1em; /* Provides horizontal separation between menu items */
 
}
 
 

This is a very basic example, but the options are literally limitless. Below, you will find a list of resources with further explanations and examples for styling a horizontal flat list menu.

Other horizontal list resources

• Listmatic
• How to Use CSS to Position Horizontal Unordered Lists

Drawbacks

As much as I would love to tell you that there are no drawbacks to this method, there is currently one major drawback with how Joomla! displays flat list menus. It only displays the main level menu items. If you create a multi-level menu, the sub menus will not display with this method.

The right-er way

Because of the afore mentioned drawback to the flat list method, I will briefly mention a right-er way to do a horizontal menu. Use one of the many menu modules available in the Joomla! Extensions Directory. I prefer to use Extended Menu, but please take the time to choose one that works best for your needs.

I will write up a brief description of Extended Menu and some ways to use it in a later article. For now, I hope that you will take my advice and use the flat list menu style.