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
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 (32)
written by Barrie North, September 18, 2006
written by Bambang, September 23, 2006
I got this tutorial dropdown menu in compassdesigns.net.
Any suggestions?
written by Cory, September 23, 2006
written by Paul, September 25, 2006
written by BTOS, September 29, 2006
written by Cory, September 29, 2006
written by Paul Gutch, October 11, 2006
written by Cory, October 11, 2006
written by Coos Creations, October 30, 2006
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
written by Cory, October 30, 2006
written by Carlos, November 02, 2006
written by Cory, November 02, 2006
written by penar, March 19, 2007
written by somayyeh, June 23, 2007
i ve tried to use the extended menu but i cant.please tell me how to use it.
thanks
written by retrosaint, July 26, 2007
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
written by adsul, August 12, 2007
I have no idea what is wrong lol.
written by alejandro, December 04, 2007
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
written by Jacob, February 06, 2008
written by Jacob, February 14, 2008
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.
written by heymyn, March 27, 2008
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).
written by Caanan, April 16, 2008
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?.
written by Caanan, April 16, 2008
Thanks!
written by DTM, May 08, 2008
written by damon, July 04, 2008
"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.
written by damon, July 04, 2008
I'm happy to hear that you do it all the time.
written by cornice london, October 22, 2008
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
written by mark weatherill, December 04, 2008
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
Write comment
Join the HowToJoomla Community!
- Create a profile
- Connect with other members
of the community - All for FREE
Already a member? Login here.


