How-To Categories

Recent How-To's

News Feed E-mail

Get How-To's right in your inbox. Subscribe to the HowToJoomla! news feed e-mail. Just enter your email address here:

Delivered by FeedBurner

Login






Lost Password?
No account yet? Register

Affiliates

Azrul's JomComment
JoomlaShack
iJoomla
The Joomla! Store
Member of W3C Sites dot com
How to create a horizontal menu, the right way PDF Print E-mail
Written by Cory   
Wednesday, 13 September 2006

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

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)
Comments (30)add comment
Barrie North: ... http://www.compassdesigns.net
and Joomla 1.5 will have (more or less) extended menu built in!
1

report abuse
vote down
vote up
September 18, 2006
Votes: +0
Cory: ... http://www.howtojoomla.net
I can't wait! smilies/smiley.gif
2

report abuse
vote down
vote up
September 18, 2006
Votes: +0
Bambang: ...
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? smilies/tongue.gif
3

report abuse
vote down
vote up
September 22, 2006
Votes: +0
Cory: ... http://www.howtojoomla.net
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.
4

report abuse
vote down
vote up
September 22, 2006
Votes: +0
Paul: ...
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.
5

report abuse
vote down
vote up
September 25, 2006
Votes: +0
Cory: ... http://www.howtojoomla.net
@Paul: Great! I'm glad you found it useful. smilies/smiley.gif
6

report abuse
vote down
vote up
September 25, 2006
Votes: +0
BTOS: ...
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.
7

report abuse
vote down
vote up
September 28, 2006
Votes: +1
Cory: ... http://www.howtojoomla.net
@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.
8

report abuse
vote down
vote up
September 28, 2006
Votes: +0
Paul Gutch: ... http://joomla.co.nz
My favourite menu system is SWMmenu available here http://swonline.biz
9

report abuse
vote down
vote up
October 11, 2006
Votes: +0
Cory: ... http://www.howtojoomla.net
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.
10

report abuse
vote down
vote up
October 11, 2006
Votes: +0
Coos Creations: ... http://www.cooscreations.com
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,

[b]Coos[/b]
11

report abuse
vote down
vote up
October 30, 2006
Votes: +0
Cory: ... http://www.howtojoomla.net
@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.
12

report abuse
vote down
vote up
October 30, 2006
Votes: +0
Carlos: ... http://www.internexo.co.cr/
I`m using Joomla 1.0.11 with Joomfish but there´re issues with Extended Menu and Joomfish.
13

report abuse
vote down
vote up
November 02, 2006
Votes: +0
Cory: ... http://www.howtojoomla.net
@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.
14

report abuse
vote down
vote up
November 02, 2006
Votes: +0
penar: ... http://www.cmslounge.com/
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.
15

report abuse
vote down
vote up
March 19, 2007
Votes: +0
Cory: ... http://www.howtojoomla.net
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!!!! smilies/smiley.gif
16

report abuse
vote down
vote up
March 19, 2007
Votes: +0
somayyeh: ...
hi,
i ve tried to use the extended menu but i cant.please tell me how to use it.
thanks
17

report abuse
vote down
vote up
June 23, 2007
Votes: +0
retrosaint: ... http://www.retrosaint.co.za
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 smilies/smiley.gif
18

report abuse
vote down
vote up
July 26, 2007
Votes: +0
adsul: ... http://www.omnipotents.org
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.
19

report abuse
vote down
vote up
August 12, 2007
Votes: +0
alejandro: ...
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
20

report abuse
vote down
vote up
December 04, 2007
Votes: -1
Jacob: ...
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.
21

report abuse
vote down
vote up
February 06, 2008
Votes: +0
Jacob: ...
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.
22

report abuse
vote down
vote up
February 14, 2008
Votes: +0
heymyn: ...
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).
23

report abuse
vote down
vote up
March 27, 2008
Votes: +0
Cory: ... http://www.howtojoomla.net
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!
24

report abuse
vote down
vote up
March 27, 2008
Votes: +0
Caanan: ...
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?.
25

report abuse
vote down
vote up
April 16, 2008
Votes: +0
Caanan: ...
Hey. I figured it out--actually from one of your other articles.

Thanks!
26

report abuse
vote down
vote up
April 16, 2008
Votes: +0
DTM: ...
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.
27

report abuse
vote down
vote up
May 08, 2008
Votes: +0
damon: ...
@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.
28

report abuse
vote down
vote up
July 04, 2008
Votes: +0
Cory: ... http://www.howtojoomla.net
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.
29

report abuse
vote down
vote up
July 04, 2008
Votes: +0
damon: ...
thanks for the super quick reply! OK, i obviously need to concentrate a bit harder to make it work smilies/cheesy.gif

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

report abuse
vote down
vote up
July 04, 2008
Votes: +0

Write comment
quote
bold
italicize
underline
strike
url
image
quote
quote
smile
wink
laugh
grin
angry
sad
shocked
cool
tongue
kiss
cry
smaller | bigger

busy
 
Tag it:
Delicious
Digg
Technorati
< Prev   Next >
Advertisement

About HowToJoomla

HowToJoomla was started in September 2006 by me, Cory Webb, a long-time Mambo/Joomla user with a desire to give back to the community that has given so much to him.

HowToJoomla is not the best, most comprehensive Joomla tips site out there. That's not the goal. The goal is to share some of the knowledge and experience that I have gained through years of using the world's best content managment system. I hope that you will find this site useful and visit often. As I come across new tips and ideas, I will post them here for all to see.

I hope you enjoy using HowToJoomla and find it very useful.

Please take some time to read the Disclaimer.

Thanks for visiting!

About Me

I am a 28-year-old husband and father of a beautiful baby girl named Lucy. I have a degree in Electrical Engineering from the University of Texas at Austin, an MBA from Baylor University, and over 4 years experience working with the Mambo/Joomla CMS.

On February 1, 2008, I started a web design, development, and consulting company specializing in designing and developing custom Joomla-powered websites. The new company is aptly named Cory Webb Media, LLC. The double meaning is purely unintentional, but with a last name like "Webb" it is difficult to escape the obvious puns. If you are looking for professional assistance with your website, please feel free to contact me to discuss your project.

I also run HowToJoomla, CoryWebb.com (my personal website/blog), and JoomlaForm.com (a site dedicated to promoting good design in the Joomla! community). In my spare time (if there is such a thing), I volunteer with the youth ministry at my church.

Copyright © 2006 - Cory Webb Media, LLC - All rights reserved.
Powered by Joomla!