How to create a horizontal menu, the right way

Written by Cory | September 13, 2006 | (0)

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.

Trackback(0)

TrackBack URI for this entry

Comments (32)

Subscribe to this comment's feed

...
written by Barrie North, September 18, 2006

and Joomla 1.5 will have (more or less) extended menu built in!

• 
• +0
• 
• 

...
written by Cory, September 19, 2006

I can't wait!

• 
• -1
• 
• 

...
written by Bambang, September 23, 2006

I've tried the horizontal menu with dropdown menu, but the problem is, it doesn't compatible with IE.
I got this tutorial dropdown menu in compassdesigns.net.
Any suggestions?

• 
• +0
• 
• 

...
written by Cory, September 23, 2006

Try using Extended Menu and installing the suckerfish horizontal template. You can download the suckerfish horizontal template here. I have used it, and it is compatible with FireFox and IE.

• 
• +1
• 
• 

...
written by Paul, September 25, 2006

Very tight article Cory. I seems like your website is what I was looking for a year ago. I hope it helps a lot of other people.

• 
• +1
• 
• 

...
written by Cory, September 25, 2006

@Paul: Great! I'm glad you found it useful.

• 
• +0
• 
• 

...
written by BTOS, September 29, 2006

Dreamweaver was very easy and propelled my interests into asp, which piqued my php and then Joomla interests. Joomla is very difficult to understand. ASP with DW took me two months. I had given up on Mambo a year earlier, prior to developing other programming skills. The learning curve is huge here, in spite of basic programming skills. Basic learning tutorials and coaching like this site offers is great. I'll be spending my hours here, instead of trying to unravel impossibly complicated coding presented by third party developers, with no documentation. Let's face it, the program is for programmers...the more advanced the better.

• 
• +2
• 
• 

...
written by Cory, September 29, 2006

@BTOS: I agree...Joomla can be confusing at times, depending on what you are trying to do with it. I hope that you stick with it and keep trying. Hopefully between sites like this, other tutorial sites, and the Joomla forums, you can get all of your questions answered.

• 
• +0
• 
• 

...
written by Paul Gutch, October 11, 2006

My favourite menu system is SWMmenu available here http://swonline.biz

• 
• +0
• 
• 

...
written by Cory, October 11, 2006

SWMenu is a nice solution, but to get the advanced features you have to pay for a commercial license. With Extended Menu, you have unlimited abilities to create whatever type of menu you want.

• 
• +0
• 
• 

...
written by Coos Creations, October 30, 2006

Great Article Cory, thanks!

One of my bookmarks is A List Apart's Taming Lists - fantastic for the die-hard CSS fans looking for more info - Check it out!

I had no idea 1.5. will have Extended Menu built in - thanks Barrie - it makes so much sense to boost what is such a massive part of the entire system...

Regards,

Coos

• 
• +0
• 
• 

...
written by Cory, October 30, 2006

@Coos: Just to clarify, Extended Menu is not technically built into 1.5. Joomla! 1.5 has a new templating system that enables designers to override the default HTML output of the core components and modules. With the new templating system, you can override the menu output in the same way that Extended Menu allows you to override the menu output.

• 
• +0
• 
• 

...
written by Carlos, November 02, 2006

I`m using Joomla 1.0.11 with Joomfish but there´re issues with Extended Menu and Joomfish.

• 
• +1
• 
• 

...
written by Cory, November 02, 2006

@Carlos: Thanks for pointing that out. I've actually seen that error before. The problem is, Extended menu has hard-coded support for MambelFish, which is the predecessor to JoomFish. It looks like someone has found a temporary solution to the problem, but the developer has not released a fixed version.

• 
• +1
• 
• 

...
written by penar, March 19, 2007

Excellent tutorial, Cory. I hope Joomla does away with the Horizontal/Vertical options altogether, because the Flat List solution can be elegantly used for both.

• 
• +0
• 
• 

...
written by Cory, March 19, 2007

Thanks, penar. I completely agree with you. I'm excited to see that the whole thing can be overridden in version 1.5. No more tables!!!!

• 
• +0
• 
• 

...
written by somayyeh, June 23, 2007

hi,
i ve tried to use the extended menu but i cant.please tell me how to use it.
thanks

• 
• +0
• 
• 

...
written by retrosaint, July 26, 2007

Hi

Thanks for your tutorial - very helpful.

I have a question though. Ive done a site for a client in joomla and used this technique for the main menu (www.quantumpublishers.co.za) Now the css works fine in IE and FF, i downloaded Safari 3 for XP and tried it on there too and works fine. But sometimes in IE and FF the menu goes to a 2nd lvl or 2nd row should i say. Example lets say i click on Photo Library it cuts the menu right there and shifts everything to a 2nd row. The client who is on Mac is also complaining about that the menu loosing its "horizontal"ness and goes into a vertical setup?.. but than after a bit it fixes it self again? So its not something that isnt happening every time.

Any ideas what could be causing this?

I realize that im using tables and should be making use of < div > but what gets me is that its so temperamental.

Thanks

• 
• +0
• 
• 

...
written by adsul, August 12, 2007

I have the same issue as the poseter above. On my site (not the one in the link) it all works fine for me. However, other users are seeing a vertical menu on the left with no CSS rather than the skinned menu horizontally across the top.

I have no idea what is wrong lol.

• 
• +0
• 
• 

...
written by alejandro, December 04, 2007

JESUS CHRIST!!!!

I spend 2 days trying to understand 25 tutorials and like 34 forums,,, let me tell you that you were the one that helpme more, but still this horizontal menu almos killed me, i was just trying to male it change color and behaviour when active, but this was HELL...

here i show jou the final css i had to name in order to make it works

a#active_menu-nav.mainlevel_current-nav

how couldsomebody gess that this was the css name??,,,

ok, thanks to you again...

you know some times it gets really hard for designers...

Hugs

Alejandro

• 
• -1
• 
• 

...
written by Jacob, February 06, 2008

Is it possible to place a spacer in between each item of the horizontal list? In a horizontal menu made in Joomla you can add a spacer symbol, but not seeing how to insert a spacer symbol in the new horizontal list.

• 
• +0
• 
• 

...
written by Jacob, February 14, 2008

Hi all,
in case anyone wants the answer to the above post from me check out:
http://www.alistapart.com/articles/taminglists/
It will tell you how to add that spacer symbol between menu items. Or you can cheat and go into your myphpadmin search in the menu database and add [menuitem]  .....[spacersymbol] to the menu item names you want separated and just make it look correctly spaced on the page and you are good to go. I say database cause Joomla will not accept more then one space in its menu name field and no   or atleast I could not get it to. But if you are looking for an easy user friendly way that can be changed easily I still have not found one.

• 
• +1
• 
• 

...
written by heymyn, March 27, 2008

Hello Cory! I've been a fan of your website every since I started using Joomla. It really helped me with my templates.

I want to ask - it possible to add a class to each in the flatlist? I want to have a unique background color for each menu item (like the one in the Joomla homepage) and when I viewed its code, each menu item had a different . How do I go about putting a unique class for each ?

Thanks and more power to your website(s).

• 
• +0
• 
• 

...
written by Cory, March 27, 2008

Hi heymyn...great question...

In Joomla 1.5, this is done by default. It adds the word "item" plus the item id as a class for each list item, so you can have unique styles for each menu item.

In Joomla 1.0, the only way to do this is to use a 3rd party component like Extended Menu.

Good luck!

• 
• +0
• 
• 

...
written by Caanan, April 16, 2008

Cory,
I found this article extremely helpful. However, I still have an issue with the menu I was working on. I'm using Joomla 1.5 and it shows up just fine in IE. In FireFox the second through last menu items are on a second line. I've looked at the source code, and there's nothing to indicate why it's forcing everything after the first link to the next line. Do you have any idea what could be causing this?.

• 
• +0
• 
• 

...
written by Caanan, April 16, 2008

Hey. I figured it out--actually from one of your other articles.

Thanks!

• 
• +0
• 
• 

...
written by DTM, May 08, 2008

Hi I have come across a weird issue with using flat list as the menu option. Very occasionally when viewing the site in firefox, the top menu will show each menu item on its own line and stuff up the look of the whole page. It doesn't happen consistently and when you refresh the page it seems to fix itself. I couldn't find a solution to this but it doesn't seem to happen when you use horizontal menu.

• 
• +0
• 
• 

...
written by damon, July 04, 2008

@cory:
"In Joomla 1.5, this is done by default. It adds the word "item" plus the item id as a class for each list item, so you can have unique styles for each menu item. "

This is a cool feature in 1.5 and I am using it in a site i'm developing now. But I want to have a horizontal menu with drop downs. All the tutorials I have seen tell me to use Suckerfish, but this means I have to use a menu and module class suffix, which in turn removes the .itemID classes.

Any idea how I can have both?

Cheers, love the blog.

• 
• +1
• 
• 

...
written by Cory, July 04, 2008

Hi Damon... You're absolutely right. This article was written a long time ago, and it mainly references Joomla 1.0.

Who says you have to use menu and module class suffixes to get Suckerfish drop-downs? All you have to do is set the property in your menu module to always expand the sub menus, and then let CSS (and a little Javascript to make up for IE6's shortcomings) do the rest. All you need to do suckerfish is a class or id that identifies the root level of your menu. After that, you can use CSS for the rest like this:

ul#mynavidentifier ul { }
ul#mynavidentifier ul ul { }

and so on. I can't really get into a lengthy explanation of it here, but suffice it to say, it is possible and I do it all the time with the default Joomla 1.5 menu module.

• 
• +1
• 
• 

...
written by damon, July 04, 2008

thanks for the super quick reply! OK, i obviously need to concentrate a bit harder to make it work

I'm happy to hear that you do it all the time.

• 
• +0
• 
• 

...
written by cornice london, October 22, 2008

NICE TUTORIAL!
Very interesting and useful informations.
This looks good! Really good tutorial include so many helpful informations!
Excellent SITE. I will refer people to your ITEMS.
Cheers

• 
• +0
• 
• 

...
written by mark weatherill, December 04, 2008

Hi Cory

i am using Joomla 1.0.x, Vista and Xitami. I have a very irritating issue with Joomla which may well be just some parameter setting somewhere.
The issue is: everytime i click Save, Apply or Cancel the software kicks me out to a HTTP 404 Not Found page with http://localhost/joomla1.0/adm...index2.php in the URL field.
I've put up with this foible until now, but i've now snapped and require help to fix it.
Cheers,
Mark Weatherill

• 
• +0
• 
• 

Write comment

Name

Email

Website

Title

Comment

smaller | bigger

Subscribe via email (Registered users only)

I have read and agree to the Terms of Usage.

Write the displayed characters

Add Comment Preview