How to create a horizontal menu, the right way

...

Mon, 15 Mar 2010 04:13:17 +0100

Seems I can't post, uhhh? - gergo

...

Tue, 06 Oct 2009 22:35:02 +0100

thanks.. it's very helpfull... :) - dark_angel

...

Thu, 04 Dec 2008 08:30:45 +0100

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/administrator/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 - mark weatherill

...

Wed, 22 Oct 2008 08:08:36 +0100

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 :D - cornice london

...

Fri, 04 Jul 2008 00:50:25 +0100

thanks for the super quick reply! OK, i obviously need to concentrate a bit harder to make it work :D I'm happy to hear that you do it all the time. - damon

...

Fri, 04 Jul 2008 00:44:14 +0100

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: [quote]ul#mynavidentifier ul { } ul#mynavidentifier ul ul { } [/quote] 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. - Cory

...

Fri, 04 Jul 2008 00:37:09 +0100

@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. - damon

...

Thu, 08 May 2008 16:25:07 +0100

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. - DTM

...

Wed, 16 Apr 2008 13:39:24 +0100

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

...

Wed, 16 Apr 2008 12:43:03 +0100

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?. - Caanan

...

Thu, 27 Mar 2008 09:03:35 +0100

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! - Cory

...

Thu, 27 Mar 2008 08:54:40 +0100

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). - heymyn

...

Thu, 14 Feb 2008 17:19:07 +0100

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. - Jacob

...

Wed, 06 Feb 2008 14:18:40 +0100

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. - Jacob

...

Tue, 04 Dec 2007 13:53:39 +0100

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 - alejandro

...

Sun, 12 Aug 2007 07:39:49 +0100

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. - adsul

...

Thu, 26 Jul 2007 08:18:23 +0100

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 :) - retrosaint

...

Sat, 23 Jun 2007 06:33:59 +0100

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

...

Mon, 19 Mar 2007 13:56:01 +0100

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!!!! :) - Cory

...

Mon, 19 Mar 2007 13:51:27 +0100

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. - penar